我们知道React的组件之间是相互独立的，组件之间的通信可以方便数据的传递和交流，那么在组件之间的通信有以下三种方式，父组件向子组件传递，子组件向父组件传递，没有嵌套关系之间的组件传递。
-
父组件向子组件通信
之前我们说过React的数据流向是单向数据流，父组件向子组件是通过props的方式传递需要的信息。
-
子组件向父组件通信
在某些情况下，父组件需要知道子组件中的状态，那么子组件是如何将自己的状态传递给父组件。
利用回调函数的方式。
在父组件中通过props传递事件函数给子组件，子组件在适当的时候通过props获得到该事件函数并触发。利用自定义事件。
-
跨级组件通信
前面两种组件中通信的方法都是比较常见和易于理解的，那么跨级组件通信，我们可以通过向更高层级传递props，如果这样做的话那么代码会显的不够优雅，而且易于混乱。在React中，我们还可以通过context来实现跨级父子组件间通信。
import React, {Component} from 'react'
class ListItem extends Component {
constructor(props){
super(props)
}
static contextTypes = {
color: PropTypes.string
}
render() {
const {value} = this.props
return (
<li>
<span>{this.context.color}</span> //context中的color
</li>
)
}
}
class List extends Component {
constructor(props){
super(props)
}
static childContextTypes = {
color: PropTypes.string
}
getChildContext() {
return {
color: 'red'
}
}
render() {
const {list} = this.props
return (
<div>
<ul>
{
list.map((item, index) => {
<ListItem key={index} value={item.value}></ListItem>
})
}
</ul>
</div>
)
}
}
如上，可以看到并没有给ListItem传递props，而是在父组件中定义ChildContext，这样从这一层开始的子组件都可以拿到定义的context。
context就类似一个全局变量。
