react--组件通讯

父组件->子组件
父子组件通讯我们是利用props来传递的。
例如：

class Parent extends Component{
  state = {
    msg: 'start'
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        msg: 'end'
      });
    }, 1000);
  }

  render() {
    return <Child_1 msg={this.state.msg} />;
  }
}

class Child_1 extends Component{
  render() {
    return <p>{this.props.msg}</p>
  }
}
**子组件->父组件**
由于react中，数据是单项流动的，从父节点传到子节点，我们一般是通过回调函数来传数据的。

class Parent extends Component{
state = {
msg: ‘start’
};

transferMsg(msg) {
this.setState({
msg
});
}

render() {
return

child msg: {this.state.msg}

**兄弟组件通讯**
对于没有直接关联关系的两个节点，就如 Child_1 与 Child_2 之间的关系，他们唯一的关联点，就是拥有相同的父组件。参考之前介绍的两种关系的通讯方式，如果我们向由 Child_1 向 Child_2 进行通讯，我们可以先通过 Child_1 向 Parent 组件进行通讯，再由 Parent 向 Child_2 组件进行通讯，所以有以下代码。

class Parent extends Component{
state = {
msg: ‘start’
};

transferMsg(msg) {
this.setState({
msg
});
}

componentDidUpdate() {
console.log(‘Parent update’);
}

render() {
return (

然而，这个方法有一个问题，由于 Parent 的 state 发生变化，会触发 Parent 及从属于 Parent 的子组件的生命周期，所以我们在控制台中可以看到，在各个组件中的 componentDidUpdate 方法均被触发。
**监听模式**
我们在用react框架的时候，会使用nodeJs，node 中的 EventEmitter 类提供了监听事件的方法 on(event, listener) 和 触发事件的方法 emit(event, [arg1], [arg2], […])
emit触发信号之后，on监听到事件。
代码如下

封装的eventJs
const EventEmitter = require(‘events’);
class Event extends EventEmitter {}
const event = new Event();
export default event;
使用：
无数据的情况下
event.emit(“test”)；
event.on(“test”,()=>{})
有数据的情况下
Event.emit(‘CommentAt’,’传的数据data’ )
Event.on(‘CommentAt’, (‘拿到的数据data’) => {

})
“`

父子通讯链接内容