9、组件通信
最后更新于：2022-04-02 06:08:39
根据组件之间的嵌套关系（即层级关系）可分为4种通信方式：父子、兄弟、跨级和无级。
## 一、父子通信
在React中，数据是自顶向下单向流动的，而父组件通过props向子组件传递需要的信息是组件之间最常见的通信方式，如下代码所示，父组件Parent向子组件Child传递了一个name属性，其值为一段字符串“strick”。
~~~js
class Parent extends React.Component {
render() {
return 子组件 ;
}
}
class Child extends React.Component {
render() {
return ;
}
}
~~~
当需要子组件向父组件传递信息时，也能通过组件的props实现，只是要多传一个回调函数，如下所示。
~~~js
class Parent extends React.Component {
callback(value) {
console.log(value); //输出从子组件传递过来的值
}
render() {
return
);
}
}
class Son extends React.Component {
render() {
return {context =>
);
}
}
~~~
通过上述代码可知，新的Context由三部分组成：
（1）React.createContext()方法，接收一个可选的defaultValue参数，返回一个Context对象（例如NameContext），包含两个属性：Provider和Consumer，它们是一对相呼应的组件。
（2）Provider，来源组件，它的value属性就是要传送的数据，Provider可关联多个来自于同一个Context对象的Consumer，像NameContext.Provider只能与NameContext.Consumer配合使用。
（3）Consumer，目标组件，出现在Provider之后，可接收一个返回React元素的函数，如果Consumer能找到对应的Provider，那么函数的参数就是Provider的value属性，否则就读取defaultValue的值。
注意，Provider组件会通过Object.is()对其value属性的新旧值做比较，以此确定是否更新作为它后代的Consumer组件。
## 四、无级通信
当两个没有嵌套关系（即无级）的组件需要通信时，可以借助消息队列实现。下面是一个用观察者模式实现的简易消息队列库，其处理过程类似于事件系统，如果将消息看成事件，那么订阅消息就是绑定事件，而发布消息就是触发事件。
~~~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);
}
}
}
~~~
EventEmitter只包含了三个方法，它们的功能如下所列：
（1）构造函数，初始化了一个用于缓存各类消息的容器。
（2）sub()方法，将回调函数用消息名称分类保存。
（3）pub()方法，依次执行了指定名称下的消息集合。
下面用一个示例演示无级通信，在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
';
{this.context.name}
; } } Grandson.contextTypes = { name: PropTypes.string }; ~~~ 从上面的示例中可以看出，跨级通信的准备工作并不简单，需要在两处做不同的配置。React官方建议慎用旧版的Context，因为它相当于JavaScript中的全局变量，容易造成数据流混乱、重名覆盖等各种副作用，并且在未来的React版本中有可能被废弃。 虽然在功能上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 ( <>{context.name}
}订阅消息
; } } ~~~ 在下面的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 ; } } ~~~ Sub组件和Pub组件会像下面这样，以兄弟的关系挂载到DOM中。当修改文本框中的内容时，就会触发消息的发布，从而完成了一次它们之间的通信。 ~~~js ReactDOM.render( <>