07.react组件间的通信

React中的组件通信

父子通信 | 子父通信 | 兄弟通信

父子通信

1. 父组件调用子组件，传参给子组件

<Son list={this.state.list}/>

2. 子组件通过this.props获取到父组件传递来的属性，可以使用，但是不能修改

从属性中解构出list
let {list} = this.props 

子父组件通信

1. 父组件定义改变自身状态的方法
2. 父组件调用子组件时把方法传递给子组件
3. 子组件通过this.props.xx方法调用，一旦调用，相当于在父组件更改自身状态的方法就会执行，可以给方法传递参数

兄弟组件通信

兄弟组件通信需要借助额外的EventHub来实现
https://www.jianshu.com/p/c4d3e194a699
其主要的功能是发布事件（on 监听）和订阅事件（trigger 触发）。一个简单的 EventHub 可以写成这样：

let callbackLists = {}
let eventHub = {
    trigger(eventName, data) {
        let callbackList = callbackLists[eventName]
        if (!callbackList) {
            return
        }
        for (let i = 0; i < callbackList.length; i++) {
            callbackList[i](data)
        }
    },
    on(eventName, callback) {
        if (!callbackLists[eventName]) {
            callbackLists[eventName] = []
        }
        callbackLists[eventName].push(callback)
    }
}

export default eventHub

第一个组件中写了触发的函数和on监听

import EventHub from "../event_hub"
setColor = ()=>{
    this.setState({
      color:"blue"
    })
  }
componentDidMount(){
    // 需要监听的事件
    EventHub.on("change",this.setColor)
  }

第二个组件里写事件触发的函数

import EventHub from "../event_hub"
changeColor = ()=>{
    // 需要让One的change组件进行触发
    EventHub.trigger('change')
  }