React组件间通信

最近学习浅尝则止的学习了一下react.js这个UI的框架，react这个库给我的最大的感觉就是它能够完全的接管UI层，在要改变视图的东西的时候只需要改变其this.state中的状态。只要操作数据层的东西视图层就会发生变化，这一点我还是很喜欢的。可以摆脱对DOM的直接操作，毕竟直接来会比较复杂，本来应该是逻辑层js中混杂着各种css的字符串，对于我来说有点不爽（JSX中也混杂这标签，但我觉的不应该把它看作标签，看作语句会习惯一点）。

回到几天的重点，讲react组件之间的状态传递。
上代码：

1.定义两个子组件child-1和child-2

  //child-1  子组件-1为输入框
    class Input extends React.Component{
      constructor(...args){
      super(...args);
      }
      render(){
        return <input type="text"/>
      }
    }
    //child-2   子组-2为显示框
    class Show extends React.Component{
      constructor(...args){
        super(...args);
      }
      render(){
        return <p></p>
      }

    }

2.定义父组件Parent并且将两个子组件插入到父组件中

class Parent extends React.Component{
      constructor(...args){
        super(...args);
      }
      render(){
        return(
          <div>
            <Input}/>
            <Show/>
          </div>
        );
      }
    }

现在的任务是在组件1总输入一些文字，同时在组件2中同时显示出来。

分析：要让组件2与组件1同步，就让组件1和2都去绑定父组件的状态。也就是说让两个组件受控。数据的走向是，组件1将自身的数据提升到父层，并且保存在父层的状态中。父层中的数据通过组件2中的props属性传递到组件2中，并在视图层进行绑定。

• 第一步先绑定<Show/>组件

//在父层中的constructor中定义状态为一个空的message，this.state = {message:''}
class Parent extends React.Component{
      constructor(...args){
        super(...args);
        this.state = {
          message:''
       }

然后在父组件中的<Show/>改为
<Show onShow={this.state.message}/>
接着来我们进入到<Show/>组件中，给其内容绑定这个穿件来的onShow属性。<Show/>组件变为

class Show extends React.Component{
      constructor(...args){
        super(...args);
      }
      render(){
        return <p>{this.props.onShow}</p>
      }

这样组件2显示层的数据已经绑定好了，接下来我们只要改变父亲层状态中的message的内容就可以使绑定的显示层的内容跟着一起变化

• 将输入层的状态(数据)提升到父亲组件中.下面是改写后的组件1

class Input extends React.Component{
      constructor(...args){
          super(...args);
      }
        //将输入的内容更新到自身组件的状态中,并且将改变后的状态作为参数传递给该组件的一个自定义属性onInp()
      fn(ev){ 
        this.props.onInp(ev.target.value);
      }
      render(){
        //用onInput(注意react中采用驼峰写法和原生的略有不同)绑定fn()函数
        return <input type="text"  onInput={this.fn.bind(this)}  value={this.props.content}/>
      }
    }

看到这里可能会有一个问题:onInp()和content没有啊?不要急,接着看

• 接着改写父组件中的输入层子组件1,

  class Parent extends React.Component{
      constructor(...args){
        super(...args);
        this.state = {
          message:''
        };
      }
      //传进的text是其提升上来的状态,然后再更新父组件的状态
      fn(text){
        this.setState({
          message:text
        })
      }
      render(){
        return(
          <div>
              /*
               onInp就出现在这里,并绑定一个函数,
               并且有一个content将父组件的状态同步到子组件中
             */
            <Input onInp={this.fn.bind(this)} content={this.state.message}/> 
            <Show onShow={this.state.message}/>
          </div>
        );
      }
    }

写完的代码是这样的

  // 父组
    class Parent extends React.Component{
      constructor(...args){
        super(...args);
        this.state = {
          message:''
        };
      }
      onInp(text){
        this.setState({
          message:text
        })
      }
      render(){
        return(
          <div>
            <Input onInp={this.onInp.bind(this)} content={this.state.message}/>
            <Show onShow={this.state.message}/>
          </div>
        );
      }
    }
    //child-1
    class Input extends React.Component{
      constructor(...args){
      super(...args);
      }
      fn(ev){
        this.props.onInp(ev.target.value);
      }
      render(){
        return <input type="text"  onInput={this.fn.bind(this)} value={this.props.content}/>
      }
    }
    //child-2
    class Show extends React.Component{
      constructor(...args){
        super(...args);
      }
      render(){
        return <p>{this.props.onShow}</p>
      }

    }
    //最后渲染出
    ReactDOM.render(
      <Parent/>,
      document.getElementById('app')
    );

浏览器效果两个组件间能够通信.png