父元件->子元件
父子元件通訊我們是利用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’) => {

})
“`