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

单向数据流

组件之间的数据传递只能由父组件传递给子组件，逐层向下传递

父-子组件之间的通信

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

code：

performance

子-父组件之间的通信

• 父组件通过props传递一个修改自身数据state的方法给子组件

• 子组件调用父组件传递过来的方法，传递参数，修改父组件的属性。相当于子组件调用父组件的方法来更新父组件的数据，或者向父组件传递数据

code

performance

兄弟节点之间的通信

兄弟节点之间的通信是建立在父子组件，子-父组件之间通信的基础上的

兄弟节点拥有同一个父节点，用父节点来当作通信的媒介

在一个兄弟节点中修改父组件的数据，然后父组件会同步到另一个需要通信的子组件，就完成了一次通信

code

performance

发布-订阅模型

身边的发布订阅模型

addEventListener 就是一个发布订阅模型

订阅：element.addEventListener('click',callback)

发布：当绑定元素的click事件被触发的时候，就会执行发布流程，调用订阅绑定的callback

原理图解

demo code