十、兄弟组件中的信息传递

消息订阅与发布机制

1. 工具库： PubSubJS

2. 安装： yarn add pubsub-js

3. 引入： import PubSub from 'pubsub-js'

4. 使用方法：
   * 在需要接收消息的地方进行，消息订阅
   ```javascript
   // 组件挂载完毕后
   componentDidMount(){
   // 消息名 回调函数---> 有人发送消息后执行的回调函数 （是消息名， 数据）
   this.token = PubSub.subscribe('test', (,data)={

                    })
               // this.token  每一次订阅消息都有一个token， 通过这个关键词，尽行取消订阅
          }
      ```
     * 在需要发送的地方进行发送消息
      ```javascript
          // 订阅名  数据
          PubSub.publish('test', '你好')
       ```
     * 在卸载组件后取消订阅
       ```javascript
        componentWillUnmount(){
               PubSub.unsubscribe(this.token)
         }
       ```
   

搜索案例实现

组件结构

      // 结构
export default class App extends Component {


    render() {

        return (
            <div>
               // 上部搜索
                <Search/>
              // 下部展示
                <List/>
            </div>
        )
    }
}

list中需要接收查询的结果， 所以在list中订阅消息

export default class List extends Component {

    state = {

        users:[],// 主要数据

        isFirst: true,// 第一次 （显示--- 欢迎来到搜索页面）

        isLode: false,// 加载页  （显示--- loadding）

        err: '', // 显示 错误信息

        }

    // 订阅消息， 在组件挂载完成后
    componentDidMount(){

        this.token = PubSub.subscribe('users', (_, data)=>{

            // 这里直接接受一个state对象， 直接存进来

            this.setState(data);

        })

    }



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

    render() {
        const {users, isFirst, isLode, err} = this.state
        return (
            // 界面设置。
            <div className="list"> 
                {   isFirst?<h1>欢迎来到搜索界面</h1>:
                    isLode? <h1>loading ....</h1>:
                    err?<h1>{err}</h1>:
                    users.map((head_img)=>{
                       return ( <div key={head_img.id} className="item">
                                    <img className="head-img" src={head_img.url} alt="head-img"/>
                                    <span className="name">{ head_img.title }</span>
                                </div>
                                )
                    })
                }
            </div>
    )
    }
}

search 中发送消息

send_request = () =>{
        const {keyWordElement:{value: keyWord}} = this;
        console.log(keyWord)
        // 发送消息
        PubSub.publish('users', {isFirst:false, isLode: true})
        setTimeout(function(){
            axios.get(`http://127.0.0.1:5000/api/public/skins`).then(
            // 发送消息
            response=>{PubSub.publish('users', {users: response.data, isFirst:false, isLode: false}) },
            // 发送消息
            error=>{PubSub.publish('users', {isFirst:false, isLode: false, err: error.message}) }
        ) 
        }, 5000)
        
    }