react--组件通讯

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

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

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

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

class Child_1 extends Component{
  render() {
    return 

{this.props.msg}

} } **子组件->父组件** 由于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’) => {

})
“`

父子通讯链接内容

你可能感兴趣的:(组件通讯)