React，通过context传递props

当组件所处层级太深时，往往需要经过很多层的props传递才能将所需的数据或者回调函数传递给使用组件。这时，以props作为桥梁的 组件通信方式便会显得很烦琐。幸好，React提供了一个context上下文，让任意层级的子组件都可以获取父组件中的状态和方法。

创建 context的方式是：在提供context的组件内新增一个getChildContext方 法，返回context对象，然后在组件的childContextTypes属性上定义 context对象的属性的类型信息。

// 提供context的父组件
class ParentComponent extends React.Component {
    // 创建context对象，包含onAddUser方法
    getChildContext() {
        return {
            onAddUser: this.handleAddUser
        };
    }
    handleAddUser() {
        // 省略
    }
    render() {
        return (
            <SonComponent />
        )
    }
}
// 声明context的属性的类型信息
 ParentComponent.childContextTypes = {       
    onAddUser: PropTypes.func     
 };

 // 相对于ParentComponent来说，任意层级的子组件
 class SonComponent extends React.Component {
    handleClick() {
        //调用this.context
        this.context.onAddUser(); 
    }
    render() {
        return (
            <button onClick={this.handleClick}>Click</button> 
        )
    }
}
 // 声明要使用的context对象的属性     
 SonComponent.contextTypes = {       
    onAddUser: PropTypes.func
 }

增加contextTypes后，在SonComponent内部就可以通过this.context.onAddUser的方式访问context中的onAddUser方法。注意，这 里的示例传递的是组件的方法，组件中的任意数据也可以通过context自动向下传递。另外，当context中包含数据时，如果要修改context中的数据，一定不能直接修改，而是要通过setState修改，组件state的变化会创建一个新的context，然后重新传递给子组件。