在 vue 的兄弟组件间的通信中会有一个 Event-Bus 事件总线, 而在 react 中没有这个辅助的函数来实现通信, 但是在项目较小的兄弟间的通信中, react 给出了一个类似事件总线的方法 -- 伪事件总线.
伪事件总线通过 node 中的 Event 模块实现, Event 可以实现也可以触发事件, react 通过 Event 的这个属性来解决兄弟间的通信.
首先创建一个 JS 文件(eg:demo.JS),
- import {EventEmitter} from 'events'
- // 让一个变量接收 EventEmitter 的原型链
- let bus={...EventEmitter.prototype}
- export default bus
创建两个兄弟组件 (分别是 a.JS 和 b.JS) 以及一个中间组件(middle.JS)(主要用来链接兄弟组件, 给两兄弟组件传话), 在中间组件中引入两个兄弟组件并将中间组件引入到入口 JS 文件中进行显示.
两个兄弟组件中分别引入 demo.JS (例如, b.JS 想要改变 a.JS 中的 name ), 则在 a.JS 的构造函数中设置原始的 state, 并在 componentWillMount 生命周期中注册改变数据的事件:
bus.on('changeName'=>{this.setState({name:'B'})})
注册事件完成后在 b.JS 中触发该事件:
bus.emit('changeName')
伪事件总线的实现原理是基于 events 事件的特点完成的, 即在任何能拿到 event 事件的地点通过注册跟触发事件来完成数据的改变.
思路: 先拿到数据, 再更改数据.
来源: http://www.bubuko.com/infodetail-2978078.html