react学习之路（2.1）----数据传递（state，props（父级向子级传递数据）)

在react中：如果数据发生改变时，无法改变时促使view的数据变化；

一：接下来看代码和效果：

class Index extends React.Component{constructor(props) {        super(props);             this.num=10    }add(){      this.num++;      console.log(this.num);  }  render(){    let arr=['1',2,3,'liuyy'];    return(          <div>             <input type='button' onClick={this.add.bind(this)}  value='点我'/>             {this.num}          </div>    )  }}

值是变化啦，但是未引起view变化的显示，当然使用闭包当然也无法完成视图的变化，所以react中，就引进state的状态机；

数据传递之一：state，在菜鸟教程中，是这么说的-----------

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

以下实例中创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

接下来上代码：

class Index extends React.Component{    constructor(props) {        super(props);          this.state={          num:10,          a:7,          b:8        }    }    add(){      this.setState({        num:this.state.num+1,      })  }render(){    return(          <div>             <input type='button' onClick={this.add.bind(this)}  value='点我'/>             <p>{this.state.num}</p>             <p>{this.state.a}</p>             {this.state.b}          </div>

state是内部的（localstorage本地的组件的，不会改变其他组件的值），只会改变本组内部的数据，数据的改变不会相互干扰；state更新是异步的不会相互干扰；

二.数据传递二:props只能用于数据接收，父级传下来的数据，讲数据接收，先得讲组件的运用，如何运用组件；

组件的使用法则三部走：

1.先引入：例如要引入hello这个作为组件，可以这么干

import Hello from './hello'

from后面是路径，你的组件存放的文件位置，必须写对，不对比报错，import后面定义的组件名，必须首字母大写；小写必定抱一个错误；

2.调用组件名：

    return(          <div>             <Hello/>          </div>    )

组件名调用必须闭合的标签，双标签和单标签都可以用；

3.在子组件中进行暴露出来，不然父级无法调用；子级中也必须加载引入react库；

import React ,{Component}from "react"; class Hello extends Component{  render(){    return(      <div className="hello">            我是新来的！      </div>    )  }}export default Hello

上面三步完成了一个组件的引入；

接下来完成组件数据的传递；

父级组件（index.jsx）：

        this.state={          con:345        }    }    add(){     this.setState({      con:this.state.con+1    })  }render(){        return(          <div>                      <Hello num={this.state.con}></Hello>            <News/>            <input type='button' onClick={this.add.bind(this)} value='有本事就'/>                     </div>    )  }

子级组件（hello.jsx）：

export default class Hello extends Component{constructor(props){super(props)console.log(typeof this.props.num)console.log(this.props.num);}render(){    return(      <div data-a='jon' className="hello">              {this.props.num}      </div>

props只能接受数据，父级的数据发生变化，子组件也能通过props进行接受，但是子组件是无法改变组件中props的值的；

如果要改变父级传入的数据，可以通过state进行处理该数据值；

子级如果想要更改父级的数据，使其发生变化，可以通过向子级传递一个方法或者函数：

父级组件：class Index extends Component{constructor() {    super()    this.state={            num:35    }  }render(){        return(          <div>            <Hello test={this.test.bind(this)} num={this.state.num} ></Hello>{//定义组件调用            }           <div>              props数据传递改变：{this.state.num}                         </div>          </div>    )  }

子级组件： <input type="button" onClick={this.props.test} value='子级改变数据'/>子级的数据变化:{this.props.num}

就这样很巧妙的将能将父级组件的数据进行改变；