React组件之间的通信与发布订阅模型

我正在参加「掘金·启航计划」

React组件之间的通信与发布订阅模型

1. 父-子组件之间的通信

• 父组件通过props将数据传递给子组件，子组件通过this.props.属性名调用

2. 子-父组件之间的通信

• 父组件通过props传递一个修改自身数据state的方法给子组件
• 子组件调用父组件传递过来的方法，传递参数，修改父组件的属性。相当于子组件调用父组件的方法来更新父组件的数据，或者向父组件传递数据

3.兄弟节点之间的通信

•  兄弟节点之间的通信是建立在父子组件，子-父组件之间通信的基础上的
•  兄弟节点拥有同一个父节点，用父节点来当作通信的媒介
•  在一个兄弟节点中修改父组件的数据，然后父组件会同步到另一个需要通信的子组件，就完成了一次通信

发布-订阅模型

特点

• 发布订阅模式中，对于发布者Publisher和订阅者Subscriber没有特殊的约束，他们好似是匿名活动，借助事件调度中心提供的接口发布和订阅事件，互不了解对方是谁。
• 松散耦合，灵活度高，常用作事件总线
• 易理解，可类比于DOM事件中的dispatchEvent和addEventListener。

缺点

• 当事件类型越来越多时，难以维护，需要考虑事件命名的规范，也要防范数据流混乱。

观察者模式

观察者模式与发布订阅模式相比，耦合度更高，通常用来实现一些响应式的效果。在观察者模式中，只有两个主体，分别是目标对象Subject，观察者Observer。