先订阅,再发布(理解:隔空对话的感觉)
安装第三方库pubsub-js yarn add pubsub-js,利用钩子函数componentDidMount在组件挂载后subscribe()函数进行订阅消息,该行为会返回一个token值,供unsubscribe()取消订阅时使用,根据token取消对应的消息.

安装

npm install pubsub-js
yarn add pubsub-js

引入

import pubsub from ‘pubsub-js’;

1
2
3
4
5
6
7
//订阅
componentDidMount(){
this.token = PubSub.subscribe('usersData',(_,data) => {
console.log('订阅消息:',data)
this.setState({...data})
})
}

publish() 进行发布消息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//发布消息
PubSub.publish('usersData',{isFirst:false,isLoading:true})
//发送网络请求
axios.get(`https://api.github.com/search/users?q=${keyWord}`).then(
response => {
// this.props.UpdateAppState({isLoading:false,users:response.data.items})
PubSub.publish('usersData',{isLoading:false,users:response.data.items})

},
error => {
//this.props.UpdateAppState({isLoading:false,err:error.message})}
PubSub.publish('usersData',{isLoading:false,err:error.message})
}

)

适用于任意组件间通信
不像props,限制在父子间传递

要在组件的componentWillUnMount中取消订阅

1
2
3
4
//取消订阅
componentWillUnmount(){
PubSub.unsubscribe(this.token)
}