消息订阅与发布pubsub

react里面组件通信可以通过消息订阅与发布来实现，
原理类似于：

订阅报纸：
1、送报地址、订阅什么报纸
2、邮递员送报纸

订阅消息：
1、消息名
2、发布消息

1、工具库：
PubSubJS
2、下载：

npm install pubsub-js --save

3.使用：

import PubSub from 'pubsub-js'//引入

PubSUb.subscribe('消息名称',function(data){
    
    });//订阅

PubSUb.publish('消息名称',data)//发布消息

代码示例：
例如两个兄弟组件Search和List组件，Search查询到数据之后，通过发布消息向List组件传值、List组件通过订阅消息接收Search传过来的值进行展示
完整代码如下：
App.js

import React, {
    
     Component } from 'react'
import Search from './components/Search'
import List from './components/List'

export default class App extends Component {
    
    
  render() {
    
    
    return (
      <div>
        <Search/>
        <List/>
      </div>
    )
  }
}

Search.jsx:

import React, {
    
     Component } from 'react'
import axios from 'axios'
import PubSub from 'pubsub-js'//引入

export default class Search extends Component {
    
    
    //获取用户数据
   getUserInfo = ()=>{
    
    
    //发布消息PubSUb.publish('消息名称',data)//发布消息
    //注：消息名称要和订阅此消息的组件的消息名称一致
    // PubSub.publish('getMessage',{name:'wangdada',age:18})
    axios.get('/api2/api/user').then(res=>{
    
    
      console.log(res,'返回的数据')
      //获取到数据发布消息
      PubSub.publish('getMessage',{
    
    users:res.data.res})
    },err=>{
    
    
      console.log(err,'请求失败')
    })
  }
  render() {
    
    
    return (
      <div>
          <button onClick={
    
    this.getUserInfo}>查数据</button>
      </div>
    )
  }
}

List.jsx:

import React, {
    
     Component } from 'react'
import PubSub from 'pubsub-js'//引入
export default class List extends Component {
    
    
  //状态
   state = {
    
    //初始化状态
      users:[],//users初始值为数据
  }

  //生命周期函数componentDidMount进行初始化相关，如消息订阅
  componentDidMount(){
    
    
      //消息订阅PubSUb.subscribe('消息名称',function(data){});//订阅
    this.token =  PubSub.subscribe('getMessage',(_,stateObj)=>{
    
    
        //更新状态
        this.setState(stateObj)
        console.log(this.state.users,'订阅消息获取到数据')
    })
  }
  //取消订阅
  componentWillUnmount(){
    
    
    PubSub.unsubscribe(this.token)
  }

  render() {
    
    
    //从状态中读取数据
    const{
    
    users} = this.state
    return (
    <div>
        {
    
    
            users.map((obj)=>{
    
    
                return <h2>姓名：{
    
    obj.username}</h2>
            })
        }
    </div>
    )
  }
}

效果如下：
在这里插入图片描述兄弟萌赶快试试叭！！！

消息订阅与发布pubsub

消息订阅与发布pubsub

猜你喜欢