&emsp;&emsp;根据组件之间的嵌套关系（即层级关系）可分为4种通信方式：父子、兄弟、跨级和无级。 ## 一、父子通信 &emsp;&emsp;在React中，数据是自顶向下单向流动的，而父组件通过props向子组件传递需要的信息是组件之间最常见的通信方式，如下代码所示，父组件Parent向子组件Child传递了一个name属性，其值为一段字符串“strick”。 ~~~js class Parent extends React.Component { render() { return <Child name="strick">子组件</Child>; } } class Child extends React.Component { render() { return <input name={this.props.name} type="text" />; } } ~~~ &emsp;&emsp;当需要子组件向父组件传递信息时，也能通过组件的props实现，只是要多传一个回调函数，如下所示。 ~~~js class Parent extends React.Component { callback(value) { console.log(value); //输出从子组件传递过来的值 } render() { return <Child callback={this.callback} />; } } class Child extends React.Component { constructor(props) { super(props); this.state = { name: "" }; } handle(e) { this.props.callback(e.target.value); //调用父组件的回调函数 this.setState({ name: e.target.value }); //更新文本框中的值 } render() { return <input value={this.state.name} type="text" onChange={this.handle.bind(this)} />; } } ~~~ &emsp;&emsp;父组件Parent会传给子组件Child一个callback()方法，子组件中的文本框注册了一个onChange事件，在事件处理程序handle()中将回调父组件的callback()方法，并把文本框的值传递过去，以此达到反向通信的效果。 ## 二、兄弟通信 &emsp;&emsp;当两个组件拥有共同的父组件时，就称它们为兄弟组件，注意，它们可以不在一个层级上，如图6所示，C与D或E都是兄弟关系。 :-:  :-: 图6 组件树 &emsp;&emsp;兄弟之间不能直接通信，需要借助状态提升的方式间接实现信息的传递，即把组件之间要共享的状态提升至最近的父组件中，由父组件来统一管理。而任意一个兄弟组件可通过从父组件传来的回调函数更新共享状态，新的共享状态再通过父组件的props回传给子组件，从而完成一次兄弟之间的通信。在下面的例子中，会有两个文本框（如图7所示），当向其中一个输入数字时，邻近的文本框会随之改变，要么加一，要么减一。 :-:  图7 两个文本框 ~~~js class Parent extends React.Component { constructor(props) { super(props); this.state = { type: "p", digit: 0 }; this.plus = this.plus.bind(this); this.minus = this.minus.bind(this); } plus(digit) { this.setState({ type: "p", digit }); } minus(digit) { this.setState({ type: "m", digit }); } render() { let { type, digit } = this.state; let pdigit = type == "p" ? digit : (digit+1); let mdigit = type == "m" ? digit : (digit-1); return ( <> <Child type="p" digit={pdigit} onDigitChange={this.plus} /> <Child type="m" digit={mdigit} onDigitChange={this.minus} /> </> ); } } class Child extends React.Component { constructor(props) { super(props); this.handle = this.handle.bind(this); } handle(e) { this.props.onDigitChange(+e.target.value); } render() { return ( <input value={this.props.digit} type="text" onChange={this.handle} /> ); } } ~~~ &emsp;&emsp;上面代码实现了一次完整的兄弟之间的通信，具体过程如下所列。 &emsp;&emsp;（1）首先在父组件Parent中定义两个兄弟组件Child，其中type属性为“p”的子组件用于递增，绑定了plus()方法；type属性为“m”的子组件用于递减，绑定了minus()方法。 &emsp;&emsp;（2）然后在子组件Child中接收传递过来的digit属性和onDigitChange()方法，前者会作为文本框的值，后者会在事件处理程序onChange()中被调用。 &emsp;&emsp;（3）如果在递增文本框中修改数值，那么就将新值传给plus()方法。递减文本框的处理过程与之类似，只是将plus()方法替换成minus()方法。 &emsp;&emsp;（4）最后更新父组件中的两个状态：type和digit，完成信息的传递。 ## 三、跨级通信 &emsp;&emsp;在一棵组件树中，当多个组件需要跨级通信时，所处的层级越深，那么需要过渡的中间层就越多，完成一次通信将变得非常繁琐，而在数据传递过程中那些作为桥梁的组件，其代码也将变得冗余且臃肿。 &emsp;&emsp;在React中，还可用Context实现跨级通信。Context能存放组件树中需要全局共享的数据，也就是说，一个组件可以借助Context跨越层级直接将数据传递给它的后代组件。如图8所示，左边的数据会通过组件的props逐级显式地传递，右边的数据会通过Context让所有组件都可访问。 :-:  图8 props和context &emsp;&emsp;随着React v16.3的发布，引入了一种全新的Context，修正了旧版本中较为棘手的问题，接下来的篇幅将着重分析这两个版本的Context。 **1）旧的Context** &emsp;&emsp;在旧版本的Context中，首先要在顶层组件内添加getChildContext()方法和静态属性childContextTypes，前者用于生成一个context对象（即初始化Context需要携带的数据），后者通过[prop-types库](https://www.cnblogs.com/strick/p/10569909.html)限制该对象的属性的数据类型，两者缺一不可。在下面的示例中，Grandpa是顶层组件，Son是中间组件，要传递的是一个包含name属性的对象。 ~~~js //顶层组件 class Grandpa extends React.Component { getChildContext() { return { name: "strick" }; } render() { return <Son />; } } Grandpa.childContextTypes = { name: PropTypes.string }; //中间组件 class Son extends React.Component { render() { return <Grandson />; } } ~~~ &emsp;&emsp;然后给后代组件（例如下面的Grandson）添加静态属性contextTypes，限制要接收的属性的数据类型，最后就能通过读取this.context得到由顶层组件提供的数据。 ~~~js class Grandson extends React.Component { render() { return <p>{this.context.name}</p>; } } Grandson.contextTypes = { name: PropTypes.string }; ~~~ &emsp;&emsp;从上面的示例中可以看出，跨级通信的准备工作并不简单，需要在两处做不同的配置。React官方建议慎用旧版的Context，因为它相当于JavaScript中的全局变量，容易造成数据流混乱、重名覆盖等各种副作用，并且在未来的React版本中有可能被废弃。 &emsp;&emsp;虽然在功能上Context实现了跨级通信，但本质上数据还是像props一样逐级传递的，因此如果某个中间组件的shouldComponentUpdate()方法返回false的话，就会阻止下层的组件更新Context中的数据。接下来会演示这个致命的缺陷，沿用上一个示例，对两个组件做些调整。在Grandpa组件中，先让Context保存组件的name状态，再新增一个按钮，并为其注册一个能更新组件状态的点击事件；在Son组件中，添加shouldComponentUpdate()方法，它的返回值是false。在把Grandpa组件挂载到DOM中后，点击按钮就能发现Context的更新传播终止于Son组件。 ~~~js class Grandpa extends React.Component { constructor(props) { super(props); this.state = { name: "strick" }; this.click = this.click.bind(this); } getChildContext() { return { name: this.state.name }; } click() { this.setState({ name: "freedom" }); } render() { return ( <> <Son /> <button onClick={this.click}>提交</button> </> ); } } class Son extends React.Component { shouldComponentUpdate() { return false; } render() { return <Grandson />; } } ~~~ **2）新的Context** &emsp;&emsp;这个版本的Context不仅采用了更符合React风格的声明式写法，还可以直接将数据传递给后代组件而不用逐级传递，一举冲破了shouldComponentUpdate()方法的限制。下面仍然使用上一节的三个组件，完成一次新的跨级通信。 ~~~js const NameContext = React.createContext({name: "strick"}); class Grandpa extends React.Component { render() { return ( <NameContext.Provider value={{name: "freedom"}}> <Son /> </NameContext.Provider> ); } } class Son extends React.Component { render() { return <Grandson />; } } class Grandson extends React.Component { render() { return ( <NameContext.Consumer>{context => <p>{context.name}</p>}</NameContext.Consumer> ); } } ~~~ &emsp;&emsp;通过上述代码可知，新的Context由三部分组成： &emsp;&emsp;（1）React.createContext()方法，接收一个可选的defaultValue参数，返回一个Context对象（例如NameContext），包含两个属性：Provider和Consumer，它们是一对相呼应的组件。 &emsp;&emsp;（2）Provider，来源组件，它的value属性就是要传送的数据，Provider可关联多个来自于同一个Context对象的Consumer，像NameContext.Provider只能与NameContext.Consumer配合使用。 &emsp;&emsp;（3）Consumer，目标组件，出现在Provider之后，可接收一个返回React元素的函数，如果Consumer能找到对应的Provider，那么函数的参数就是Provider的value属性，否则就读取defaultValue的值。 &emsp;&emsp;注意，Provider组件会通过Object.is()对其value属性的新旧值做比较，以此确定是否更新作为它后代的Consumer组件。 ## 四、无级通信 &emsp;&emsp;当两个没有嵌套关系（即无级）的组件需要通信时，可以借助消息队列实现。下面是一个用观察者模式实现的简易消息队列库，其处理过程类似于事件系统，如果将消息看成事件，那么订阅消息就是绑定事件，而发布消息就是触发事件。 ~~~js class EventEmitter { constructor() { this.events = {}; } sub(event, listener) { //订阅消息 if (!this.events[event]) { this.events[event] = { listeners: [] }; } this.events[event].listeners.push(listener); } pub(name, ...params) { //发布消息 for (const listener of this.events[name].listeners) { listener.apply(this, params); } } } ~~~ &emsp;&emsp;EventEmitter只包含了三个方法，它们的功能如下所列： &emsp;&emsp;（1）构造函数，初始化了一个用于缓存各类消息的容器。 &emsp;&emsp;（2）sub()方法，将回调函数用消息名称分类保存。 &emsp;&emsp;（3）pub()方法，依次执行了指定名称下的消息集合。 &emsp;&emsp;下面用一个示例演示无级通信，在Sub组件的构造函数中，会订阅一次消息，消息名称为"TextBox"，回调函数会接收一个参数，并将其输出到控制台。 ~~~js let emitter = new EventEmitter(); class Sub extends React.Component { constructor(props) { super(props); emitter.sub("TextBox", value => console.log(value)); } render() { return <p>订阅消息</p>; } } ~~~ &emsp;&emsp;在下面的Pub组件中，为文本框注册了onChange事件，在事件处理程序handle()中发布名为"TextBox"的消息集合，并将文本框中的值作为参数传递到回调函数中。 ~~~js class Pub extends React.Component { constructor(props) { super(props); this.state = { value: "" }; } handle(e) { const value = e.target.value; emitter.pub("TextBox", value); this.setState({ value }); } render() { return <input value={this.state.value} onChange={this.handle.bind(this)} />; } } ~~~ &emsp;&emsp;Sub组件和Pub组件会像下面这样，以兄弟的关系挂载到DOM中。当修改文本框中的内容时，就会触发消息的发布，从而完成了一次它们之间的通信。 ~~~js ReactDOM.render( <> <Sub /> <Pub /> </>, document.getElementById("container") ); ~~~ &emsp;&emsp;当业务逻辑复杂到一定程度时，普通的消息队列可能就捉襟见肘了，此时可以考虑引入Mobx、Redux等专门的状态管理工具来实现组件之间的通信。 ***** > 原文出处： [博客园-React躬行记](https://www.cnblogs.com/strick/category/1455720.html) [知乎专栏-React躬行记](https://zhuanlan.zhihu.com/pwreact) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。