react组件间通信

---

父子组件间通信

父传子 props

子传父（调用父中的函数）

1.父组件通过props传递给子组件一个函数
<Header a={this.a} />

父组件中的方法： a = (val) => { console.log("App", val); };

2.子组件想给父组件传递数据时，调用该函数并传递参数
this.props.a(target.value);

兄弟组件间通信

消息订阅-发布机制（任意组件沟通）

1. 工具库: PubSubJS
2. 下载: npm install pubsub-js --save
3. 使用:
   1. import PubSub from ‘pubsub-js’ //引入
   2. PubSub.subscribe(‘delete’, function(data){ }); //订阅
   3. PubSub.publish(‘delete’, data) //发布消息

在需要接收数据的组件里，订阅消息并约定好订阅的是哪一个消息（即确定消息名），
有组件发布消息同时携带数据，接收数据的组件会通过回调函数接收消息

订阅消息

  componentDidMount() {
    // 订阅消息
   this.token = PubSub.subscribe("li", (_, data) => {
      console.log(data);
      this.setState(data);
    });
  }

发布消息

 PubSub.publish("li", { isFirst: false, isLoading: true });

  componentWillUnmount() {
    PubSub.unsubscribe(this.token);
  }