概述
react中的组件通信问题，根据层级关系总共有四种类型的组件通信：父子组件、爷孙组件、兄弟组件和任意组件。前三种是任意组件的范畴，所以说，第四种是一种通用的方法。下面逐一介绍各个方法的实现方式：
1、父子组件通信
父子组件通信分为父类组件向子类组件通信、子类组件向父类组件通信两种情况：
1.1父组件向子组件传值
（1）通过属性传值的方式实现:
之所以可以这样实现，是因为react在状态更新时，会自动更新子组件。
第一步：在父类组件中初始化属性及引入子组件
// 初始化
<AddSpecialEvent
visible={visible}
eventDate={this.state.dateParam}
handleCancel={this.handleCancel}
handleOk={this.handleOk} />
第二步：在子类组件中引用父组件传递的属性值
const { visible } = this.props;
这种方法优点是实现起来比较简单，缺点是必须在初始化时传入，并且不可以撤回，且只能传入一个函数。
（2）通过react生命周期函数实现
react生命周期componentWillReceiveProps可以实现父子组件之间的通信，但是该生命周期函数会在父子组件之间状态改变时触发，不利于性能的提升，最好能够通过判断当前的this.props及nestProps中的某一个属性是否相同，在进行更新子组件。
实现方法如下：在子类组件中调用生命周期函数
componentWillReceiveProps = (nextProps) => {
if(nextProps.checkedList === this.props.checkedList) {
this.setState({
checkList: nextProps.checkedList
})
}
}
这种方法借助react生命周期来实现，实现起来虽然容易，但是不建议使用，不利于性能的提升。而且在父、子组件之间的状态改变时，不易控制。
1.2子类组件向父类组件传值通信
（1）父类组件初始化子类组件时作为属性传入回调函数
第一步：初始化回调函数handleCancel和handleOk
<SelectArea
modalVisible={modalVisible}
handleCancel={this.handleModalCancel}
handleOk={this.handleModalOk}
areaList={areaList}
checkedList={checkedList}
第二步：子组件传值
// 确定
handleModalOk = () => {
let {checkList} = this.state
this.props.handleModalOk(checkList)
}
（2）通过部署消息接口的方式实现子组件向父类组件传值
首先需要一个可以发布和订阅消息的基类，子组件继承消息基类，就有了发布消息的能力，然后父类组件去订阅子组件的消息，即可实现子组件向父组件的传值。这种方法实现起来较为复杂，适合子组件向父组件传值比较频繁的需求。在这里不在赘述。
2、爷孙组件通信
上面的例子我们了解到了父子组件之间的通信问题，根据递归思想，很容易相处爷孙组件之间的通信方式，就是通过层层传递属性的方式实现。即把爷孙组件，分解成多个父子组件通信的问题。层层传递的有点是非常的简单，但是会浪费很多的代码，非常的繁琐，中间作为桥梁的组件会引入较多不属于自己的属性代码。
在react中，通过context可以让祖先组件直接把属性传递给后代组件。可以跨越任何层次向后代传递消息。组件通信之前，需要双向声明，也就是在祖先组件中声明要传递的属性，并在后代组件中再次声明，然后在祖先组件中引入要传递的属性，就可以在后代组件中使用从父类组件中传递的属性了。
import PropTypes from 'prop-types';
class Child extends Component {
// 后代组件声明需要读取context上的数据
static contextTypes= {
text: PropTypes.string
}
render () {
// 通过this.context读取context上的数据
return <div>{this.context.text}</div>
}
}
clsss Ancestor extents Component {
// 祖先组件声明需要在context上放入的数据
static childContextTypes = {
text: PropTypes.string
}
// 祖先组件在context上放入数据
getChildContext = () => {
return { text: '搬砖笔记' }
}
}
context的优点是省去了层层传递的麻烦，并且通过双向声明控制了数据的可见性，当层次较多时，这是一种值得采用的方案；但缺点是很明显的，就像全局变量一样，如果不加以节制很容易造成混乱，而且也容易出现重名覆盖的问题。
个人建议是对所有组件共享的一些制度信息可以采用context来传递，比如登录用户的信息等。React Router路由就是通过context来传递路由属性的。
3、兄弟组件通信
如果两个组件时兄弟关系，那么可以将父组件作为桥梁来说来实现两个组件之间的通信，这其实是一种主模块模式。在下面的例子中实现了两个兄弟组件通过父类组件通信的功能。
class Father extends Component{
constructor(props){
super(props)
this.state = {
child2bgcolor:'pink'
}
}
onchild2bgChange(color){
this.setState({
child2bgcolor:color
})
}
render(props){
<div>
<Children1 changeChild2Color={(color)=>{this.onchild2bgChange(color)}} />
<Children2 bgcolor={this.state.child2bgcolor} />
</div>
}
}
