react组件间的通信

https://www.jianshu.com/p/fb915d9c99c4

父组件向子组件通信：使用 props

---

子组件向父组件通信：使用 props 回调 或者refs

---

跨级组件间通信：使用 context 对象

context相当于一个全局变量，是一个大容器，我们可以把要通信的内容放在这个容器中.
使用要满足2条件:

• 上级组件要声明自己支持context，提供 context 中属性的 PropTypes
• 子组件要声明自己需要使用 context
• 若是子向父传递:父组件需提供一个 getChildContext 函数，以返回一个初始的 context 对象

!!!如果组件中使用构造函数（constructor），还需要在构造函数中传入第二个参数 context，
并在 super 调用父类构造函数是传入 context，否则会造成组件中无法使用 context。

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

!!!关于改变context对象

不能直接改变 context 对象中的属性，只有让其和父组件的 state 或者 props 进行关联，在父组件的 state 或 props 变化时，会自动调用 getChildContext() 方法，返回新的 context 对象，而后子组件进行相应的渲染。
即 父组件中:

• getChildContext中 return的变量,用this.state.xxx ;
• 并且callback 得setStatexxx,

以下为context的使用,

// 父组件声明自己支持 context
   static childContextTypes = {
       color:PropTypes.string,
      callback:PropTypes.func,
  }
  // 父组件提供一个函数，用来返回相应的 context 对象
  getChildContext(){
       return{
          color:"red",
           callback:this.callback.bind(this)
      }
   }
  callback(msg){
   	console.log(msg)
   }
    
// 子组件声明自己需要使用 context
   static contextTypes = {
       color:PropTypes.string,
      callback:PropTypes.func,
  }

//如果只是父向子单向通信, const style = { color:this.context.color }就行,

//如果是子向父传递

const cb = (msg) => {
return () => {
this.context.callback(msg);
}
}
return(
<div style = { style }>
SUBSUB
<button onClick = { cb(“传递过去的信息！”) }>点击我

);

---

非嵌套组件间通信：使用事件订阅 or 利用二者共同父组件的 context 对象进行通信(使用context的话需要层共同的父级来进行中转,所以不建议.)

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

//ev,js
import { EventEmitter } from "events"; export default new
EventEmitter();
//传递子组件

在其中触发自定义数据 emitter.emit("callMe","Hello")     //callme为获取key

//接收子组件.js
componentDidMount(){
       // 声明一个自定义事件
       // 在组件装载完成以后
       this.eventEmitter = emitter.addListener("callMe",(msg)=>{  //通过callme 取得值
           this.setState({
               msg
           })
       });
           }
   // 组件销毁前移除事件监听
  componentWillUnmount(){
     emitter.removeListener(this.eventEmitter);
  }