分为三种类型的通信关系：
1、父组件向子组件通信
2、子组件向父组件通信
3、没有嵌套关系的组件之间的通信
父组件向子组件通信
父组件通过子组件的props向子组件传递需要的信息。
子组件向父组件通信
一个栗子：
ListItem类：
class ListItem extends Component {
static defaultProps = {
text: '',checked: false,}
render() {
return (
<li>
<input type="checkBox" checked={this.props.checked}
onChange={this.props.onChange} /> <span>{this.props.value}</span>
</li>
);
}
}
List类：
class List extends Component {
static defaultProps = {
list: [],handleItemChange: () => {},};
constructor(props) {
super(props);
this.state = {
list: this.props.list.map(entry => ({
text: entry.text,checked: entry.checked,})),};
}
onItemChange(entry) {
const { list } = this.state;
this.setState({
list: list.map(prevEntry => ({
text: prevEntry.text,checked: prevEntry.text === entry.text ?
!prevEntry.checked : prevEntry.checked,});
this.props.handleItemChange(entry);
}
render() {
return (
<div>
<ul>
{this.state.list.map((entry,index) => (
<ListItem
key={`list-${index}`}
value={entry.text}
checked={entry.checked}
onChange={this.onItemChange.bind(this,entry)}
/>
))}
</ul>
</div>
);
}
}
在这个栗子中，用的是回调函数的方法：在List组件中写入了handleItemChange方法，当ListItem发生变化的时候，我们就可以通过这个方法拿到数据了。
跨级组件通信
可以像前文那样，使用层层传递的props，但是这样代码会十分冗余。除了这个方法之外，我们可以使用context来实现跨级通信。
示例代码：
ListItem:
class ListItem extends Component {
static contextTypes = {
color: PropTypes.string,};
render() {
const { value } = this.props;
return (
<li style={{background: this.context.color}}>
<span>{value}</span>
</li>
);
}
}
List:
class List extends Component {
static childContextTypes = {
color: PropTypes.string,};
getChildContext() {
return {
color: 'red',};
}
render() {
const { list } = this.props;
return (
<div>
<ListTitle title={title} />
<ul>
{list.map((entry,index) => (
<ListItem key={`list-${index}`} value={entry.text} />
))}
</ul>
</div>
);
}
}
在这个栗子中，我们并没有给ListItem传递props，而是在父组件中定义了ChildContext，这样，从这一层开始的子组件都能拿到定义的context，例如本例中的color。
实际上，context一直存在于React源码中，但是，React官方并不建议大量使用context，因为尽管它可以减少逐层传递，但是，当组件结构复杂的时候，我们就并不知道context是从哪一层里传过来的。
大部分情况下，我们并不推荐使用context。使用context比较好的场景是真正意义上的全局信息且不会被更改：比如界面主题和用户信息等。
如果我们真的需要它，那么建议写成高阶组件来实现。有关高阶组件的内容，将会在后面的章节中进行介绍。
没有嵌套关系的组件通信
没有嵌套关系的组件，那只能通过一种可以影响全局的方式来考虑。
比如，刚才提到的自定义事件机制。
我们在处理时间的时候需要注意，在componentDidMount事件中，如果组件挂载完成，再订阅事件；当组件卸载的时候，需要在componentWillUnmount中取消事件的订阅。
栗子：
组件1:
class App extends Component {
componentDidMount() {
this.itemChange = emitter.on('ItemChange',(data) => { console.log(data); }); } componentWillUnmount() { emitter.removeListener(this.itemChange); } render() { return ( <List list={[{text: 1},{text: 2}]} /> ); } }
组件2的onItemChange方法:
onItemChange(entry) {
const { list } = this.state;
this.setState({
list: list.map(prevEntry => ({
text: prevEntry.text,checked: prevEntry.text === entry.text ?
!prevEntry.checked : prevEntry.checked,}))
});
emitter.emit('ItemChange',entry);
}
本例采用的是发布／订阅的方式。借用Node.js Events模块的浏览器版实现，在代码中需要加入：
import { EventEmitter } from 'events';
export default new EventEmitter();
/**********把EventEmitter输出到组件中使用************/
import ReactDOM from 'react-dom';
import React,{ Component,PropTypes } from 'react'; import emitter from './events';
总结：一般情况下，组件之间的通信应该尽可能的保持简洁，如果说出现了多级传递活着跨级传递时，一般需要首先重新审视下是否有更合理的方式。
上面这个栗子利用全局对象来保存事件，用广播的方式来处理事件，这样的设计方法很常见，但是也容易带来逻辑的混乱。
