React数据共享插件-PubSub

React数据共享插件-PubSub

 

下载pubsub-js插件

npm install pubsub-js

 

如果要修改一个变量值的话

PubSub.publish('state',{isLoading: true})

 

如果有人修改了这个变量,就触发下面的回调函数

PubSub.subscribe('state', (msg, stateObj) => {
    this.setState(stateObj)
})
  • msg没用,但是必须是第一个参数,stateobj就是修改成什么对象了 {isLoading: true}

 

注意点:要在组件被消去的时候,取消订阅

  • 因为订阅一个变量的改变和settimeout这种函数一样,都有一个对这个订阅器的唯一标识,在settimeout中就是使用timer来记录,二pubsub有一个token,下面就是把token挂载到this上了,当组件被消去的时候,就对订阅进行取消


    // 该生命函数可以用来初始化一些变量
    componentDidMount() {
        // 如果有人发布了这个消息,那么就触发回调函数
        this.token = PubSub.subscribe('state', (msg, stateObj) => {
            this.setState(stateObj)
        })
    }
​
    componentWillUnmount() {
        // 组件消去的时候,就取消订阅
        PubSub.unsubscribe(this.token)
    }
 

 

原文地址:https://www.cnblogs.com/SCAU-gogocj/p/15330627.html