React总结（二）-- 组件之间的通信

1.父组件向子组件通信 :

父组件通过向子组件传递 props，子组件得到 props 后进行相应的处理。
Container.js

.....
import Sub from 'Sub.js';
class Container extends React.Component{
    constructor(){
        super();
    }
    render(){
        return (
            <Sub title="评论列表"  // 通过属性传递
                 name={"xx"}
             />
        );
    }
}

Sub.js

class Sub extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <div>
                <p>{this.props.title}</p> // 用this.props获取父组件传入的值
                <p>{this.props.name}</p>
            </div>
        );
    }
}

exprot default Sub;

2.子组件向父组件通信 ：

利用回调函数，可以实现子组件向父组件通信：
父组件将一个函数作为 props 传递给子组件，子组件调用该回调函数，便可以向父组件通信。

Container.js

.....
import Sub from 'Sub.js';
class Container extends React.Component{
    constructor(){
        super();
    }
    getChildMsg(msg){
        console.log("子组件给父组件通信内容： "+msg);
    }
    render(){
        return (
            <Sub title="评论列表" 
            callback={this.getChildMsg.bind(this)} // 将回调函数传给子组件
            />
        );
    }
}

Sub.js

class Sub extends React.Component{
    constructor(props){
        super(props);
        this.onOk=this.onOk.bind(this);
    }
    onOk(){
        this.props.callback("sub"); // 回调函数
    }
    render(){
        return (
            <div>
                <button onClick={this.onOk}></button>
            </div>
        );
    }
}

exprot default Sub;

3.跨级组件之间的通信

所谓跨级组件通信，就是父组件向子组件的子组件通信，向更深层的子组件通信。跨级组件通信可以采用下面两种方式：

1. 使用 context 对象

父组件：

    1.声明自己支持的context，并且提供context中属性的PropType.
      声明：
          static childContextTypes={
             name： PropTypes.string, // 需要传入给子组件的参数
             getData: PropTypes.func,
             arr: PropTypes.array
          }
    2. 提供一个getChildContext函数，返回一个初始化的context对象
        返回context对象：
        getChildContext(){
            return{
                name: this.state.name,
                arr : this.props.array,
                getData: this.getData.bind(this)
            }
        }
    3. 回调函数
        getData(data){
            console.log(data);// data 为子组件传给父组件的回调
        }   

子组件:

    1. 声明自己需要使用的context
        static contextTypes={
            name： PropTypes.string,
            getData: PropTypes.func
        }
    2. 使用context
        var name = this.context.name;
        var str = "把这个值传递给父级"；
        this.context.getData(str);

注意事项:

    1. 在组件中如果有constructor,在构造函数中，应该将context传入
        constructor(props, context){
            super(props, context);
        }

    2. 改变context对象
        待续。。。
    3. context在无状态组件中的用法
        const Sub =(props, context)=>{
            var name = context.name;
            context.getData("回调传参");
            retrun(
                <div>....</div>
            );
        }

        Sub.contextTypes={
            name: PropTypes.string,
            getData: PropTypes.func

    4. context 在生命周期中的用法
      constructor(props, context)
      componentWillReceiveProps(nextProps, nextContext)
      shouldComponentUpdate(nextProps, nextState, nextContext)
      componentWillUpdate(nextProps, nextState, nextContext)
      componentDidUpdate(prevProps, prevState, prevContext) 

   5. 根据react的组件层级，一个组件可以有多个父级，可以同时声明在不通父级中要使用的context   

2. 中间组件层层传递 props

App.js
    render(){
        return(
            <Sub  
            name="test"
            sendData={this.sendData.bind(this)} 
            />
        );
    };

Sub.js
    render(){
        return(
            <SubSub 
            name={this.props.name}
            sendData={this.props.sendData}  
            />
        );
    };  

SubSub.js
    ....
    var name = this.props.name;
    this.props.sendData("App回调");
    ...

4.非嵌套组件间通信

非嵌套组件，就是没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。对于非嵌套组件，可以采用下面两种方式：

1.利用二者共同父组件的 context 对象进行通信

    context使用方法同上

2.使用自定义事件的方式

后期继续。。。