四、React中利用发布订阅机制（PubSub）来解决组件之间的数据传递

一、关于父子组件之间的通信

1. 父组件给子组件传递数据：利用props
2. 子组件给父组件传递数据：父组件先通过props 给子组件传递一个函数，要求子组件执行这个函数，同时传递一个参数，此时父组件中的函数可以拿到这个参数
3. 存在问题：

• 操作数据的部分全部放在共同的父组件中
• 兄弟之间传递数据需要借助共同的父组件，过于繁琐

二、发布订阅机制

1. 用途：适用于任何组件之间的通信，避免了借助共同父组件
2. 用法：在需要接受数据的组件中订阅消息，传递数据的组件中发布消息（先订阅，再发布）。当订阅者和发布者订阅的消息名一致，则订阅者执行一个回调函数，在该回调函数中可以拿到发布者携带的数据
3. 使用：
   安装

npm install pubsub-js

订阅者：
组件挂载完毕，订阅消息

componentDidMount() {
     this.token = PubSub.subscribe('transfrom', (_, stateObj) => {
         this.setState(stateObj)
     })
 }
 //回调函数的第一个参数即订阅消息名，这里不需要使用，故用一个占位符
 //setState函数中直接接收发布者发布的状态对象

组件解绑前，取消消息的订阅

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

发布者：

axios.get(`/api1/search/users?q=${keyWords}`).then(
    response => {
        PubSub.publish('transfrom', {users:response.data.items, isLoading: false})
        // this.props.getSearch({users:response.data.items, isLoading: false})
        console.log(response.data);
    },
    error => {
        PubSub.publish('transfrom', {isLoading:false,err:error.message})
        // this.props.getSearch({isLoading:false,err:error.message})
    }
)

• PubSub使得APP.js中的代码更加简洁，实现了兄弟组件之间的直接通信