react组件通信如何实现?

[artdong]

react组件通信如何实现?

[artdong]

1. 父组件向子组件通信

React数据流动是单向的，父组件向子组件通信也是最常见的；父组件通过props向子组件传递需要的信息

2. 子组件向父组件通信

• 利用回调函数

子组件更新组件状态，通过回调函数的方式传递给父组件。 子组件调用父组件通过props传给它的函数更新父组件state，进而完成子组件向父组件的通讯。

3. 跨级组件通信

• 层层组件传递props

例如A组件和B组件之间要进行通信,先找到A和B公共的父组件,A先向C组件通信,C组件通过props和B组件通信,此时C组件起的就是中间件的作用

• 使用context

context是一个全局变量,像是一个大容器,在任何地方都可以访问到,我们可以把要通信的信息放在context上,然后在其他组件中可以随意取到;但是React官方不建议使用大量context,尽管他可以减少逐层传递,但是当组件结构复杂的时候,我们并不知道context是从哪里传过来的;而且context是一个全局变量,全局变量正是导致应用走向混乱的罪魁祸首

• 使用redux

4. 非嵌套关系的组件通信

• 使用自定义事件机制

非嵌套组件: 就是没有任何包含关系的组件,包括兄弟组件以及不再同一个父级的非兄弟组件。 使用事件订阅，即一个发布者，一个或多个订阅者。

安装event

npm install event -save

新建Evt.js，导入events

import {EventEmitter} from 'events';
export default new EventEmitter();   

发布者

通过emit事件触发方法，发布订阅消息给订阅者。

订阅者

通过emitter.addListener(事件名称,函数名)方法，进行事件监听(订阅)。 通过emitter.removeListener(事件名称,函数名)方法 ，进行事件销毁(取消订阅)