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)
    }