React组件之间的通讯

以前有写过一些关于react的基础的Demo。如今说一说组件之间怎么通讯。

github 上有相应的代码参考：https://github.com/RealAndMe/react-demo

1. 概念

React主要是用来构建用户界面的JavaScript库。它的特色：

• 单向响应数据流
• 组件。代码能够复用。
• 高效。React是在虚拟DOM上进行操做而后渲染到真实DOM上的。
• JSX。这是JavaScript的语法扩展。

2. React组件之间的通讯

react 组件之间的交流能够分红 4 种：

• 【父组件】向【子组件】传值
• 【父组件】向【孙组件】传值
• 【子组件】向【父组件】传值
• 兄弟组件之间传值（没有任何嵌套关系的组件）

3. 数据从父组件到子组件

父组件给子组件传值，也就是子组件调用父组件。

var Father = React.createClass({
  render: function() {
    return (
      <div>
        <Child01 name={this.props.name} />
        <Child02 site={this.props.site} />
      </div>
    );
  }
});
 
var Child01 = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});
 
var Child02 = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});
 
ReactDOM.render(
  <Father name="父组件给子组件传参" site=" http://www.baidu.com" />,
  document.getElementById('contain')
);

上述代码中，父组件是<Father />。有两个子组件<Child01 /> <Child02 /> 。父组件向子组件传值，子组件经过调用 this.props 来获取父组件的值。

查看（demo14）

还有另外一个例子在 github 上的 demo14 中的 index2.html，也是关于数据从父组件传到子组件的。

4. 数据从父组件到孙组件

//父组件
var Father = React.createClass({
    getInitialState: function(){
        return {
            msg: "start"
        }
    },
    componentDidMount: function(){
        var t = this;
        setTimeout(function(){
            t.setState({
                msg: "end"
            });
        },1000);
    },
    render: function() {
        return (
          <div>
            <Child msg={this.state.msg}/>
          </div>
        );
     }
});
//子组件
var Child = React.createClass({
    render: function(){
        return(
            <div>
                <h1>{this.props.msg}</h1>
                <ChildChild {...this.props} />
            </div>
        )
    }
});
//孙组件
var ChildChild = React.createClass({
    render: function(){
        return(
            <h1>{this.props.msg}</h1>
        )
    }
})
ReactDOM.render(<Father />,document.getElementById("contain"));

上述代码中，是父组件向孙组件传参。经过 ...运算符 将父组件的信息，以更加简洁的方式传递给孙组件。上级组件 props 与 state 的改变，会致使组件自己及其子组件的生命周期改变。

查看（demo15）

注意： 若是组件嵌套层太深，那么 props 传值就变得没有那么高效。因此建议尽量的减小组件的层次，结构简单清楚较好。

4. 数据从子组件到父组件

//父组件 
var Father = React.createClass({
    getInitialState: function(){
        return {
            checked: false
        }
    },
    onCheck: function(newState){
        this.setState({checked: newState});
    },
    render: function() {
        var isCheck = this.state.checked?"yes":"no";
        return (
          <div>
            <div>父组件的状态：{isCheck}</div>
            <Child text="子组件勾选改变状态:"
                    isCheck={this.state.checked}
                    callFather={this.onCheck}/>
          </div>
        );
     }
});
//子组件
var Child = React.createClass({
    getInitialState: function(){
        return{
            checked: this.props.inCheck
        };
    },
    onChangeState: function(){
        var newState = !this.state.checked;
        this.setState({
            checked : newState
        });
        //注意，须要调用父组件的方法实现数据从子组件传给父组件
        this.props.callFather(newState);
    },
    render: function(){
        //子组件从父组件获取值
        var text = this.props.text;
        //子组件自身的状态
        var checked = this.state.checked;
        return(
            <div>{text}<input type="checkbox" checked={checked} onClick={this.onChangeState}/></div>
        )
    }
});
ReactDOM.render(<Father />,document.getElementById("contain"));

上面介绍过，父组件能够经过 props 的方式，自上而下向子组件或是孙组件通信，而子组件向父组件通信也能够经过 props ，只是父组件传递的是做用域为父组件自己的函数，子组件调用该函数，将子组件须要传递的值做为参数，传给父组件的做用域中。

上述代码中，父组件 <Father /> 它自己有一个函数 onCheck() ，子组件 <Child /> 经过 this.props 调用该函数，而后将传递的信息经过 newState 做为参数传给父组件。

查看（demo16）

还有另外一个例子在 github 上的 demo16 中的 index2.html，也是关于数据从子组件到父组件，不一样的是，它是多个子组件调用同一个回调函数。

5. 兄弟组件之间传值

拥有同一个父组件，可是没有直接关联关系的两个组件就能够称之为兄弟组件。

好比有两个兄弟组件<Child01 /> <Child02 /> ，他们拥有同一个父组件 <Father /> ，若是咱们由 <Child01 /> 向 <Child02 /> 进行通信，那么咱们能够经过 <Child01 /> 先向 <Father /> 通信，而后经过 <Father /> 向 <Child02 /> 通信。这种方法就是结合了上述的子组件和父组件之间的通信 来完成的。

//父组件
var Father = React.createClass({
    getInitialState: function(){
        return{
            msg: "兄弟组件未更新"
        }
    },
    transferMsg: function(){
        this.setState({msg:"兄弟组件沟通成功"});
    },
    render: function(){
        return(
            <div>
                <p>兄弟组件之间进行通信</p>
                <Child01 transferMsg={this.transferMsg}/>
                <Child02 text={this.state.msg} />
            </div>
        )
    }
}); 
//子组件01
var Child01 = React.createClass({
    render: function(){
        return(
            <button onClick={this.props.transferMsg}>更新兄弟组件</button>
        )
    }
}); 
//子组件02
var Child02 = React.createClass({
    render: function(){
        return(
            <div>{this.props.text}</div>
        )
    }
}); 
ReactDOM.render(<Father />,document.getElementById("contain"));

上述代码中，<Child01 /> 经过 this.props 回调 <Father /> 中的 transferMsg() 函数方法，而后 <Father /> 将信息传递给 <Child02 /> 。

查看（demo17）

有道云笔记参考： http://note.youdao.com/noteshare?id=9905a9dc8d428c4e570a738279708a98&sub=6964AD2CE4C849C4A41A2749A69BB940