react组件通信中常用的几种方式简单总结NZ

一、父组件向子组件通信

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

二、子组件向父组件通信

1. 利用回调函数
2. 利用自定义事件机制(onClick事件)

三、跨级组件通信

1. 利用props在层层组件中传递
2. 使用context：
   context的使用方法也很简单，在顶部父组件声明context，那它的所有子组件可以通过 this.context 直接获取得到；
   如果是父组件向子组件单向通信，可以使用变量，如果子组件想向父组件通信，同样可以由父组件提供一个回调函数，供子组件调用，回传参数。
   在使用 context 时，有两点需要注意：
   1、父组件需要声明自己支持 context，并提供 context 中属性的 PropTypes
   子组件需要声明自己需要使用 context，并提供其需要使用的 context 属性的 PropTypes
   2、父组件需提供一个 getChildContext 函数，以返回一个初始的 context 对象
   如果组件中使用构造函数（constructor），还需要在构造函数中传入第二个参数 context，并在 super 调用父类构造函数是传入 context，否则会造成组件中无法使用 context。

constructor(props,context){
  super(props,context);
}

四、没有嵌套关系组件之间的通信

使用自定义事件机制：
在componentDidMount事件中,如果组件挂载完成,再订阅事件;在组件卸载的时候,在componentWillUnmount事件中取消事件的订阅;
以常用的发布/订阅模式举例,借用Node.js Events模块的浏览器版实现
自定义事件是典型的发布订阅模式,通过向事件对象上添加监听器和触发事件来实现组件之间的通信。
我们需要使用一个 events 包：

npm install events --save
新建一个 ev.js，引入 events 包，并向外提供一个事件对象，供通信时使用：

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