react组件间的通讯
1.context
一种组件间通信方式,常用于【祖组件】与【后代组件】间通讯
1.创建Context容器对象(在祖孙组件都能用的地方创建)
const MyContext=React.createContext()
const {Provider,Consumer}=MyContext
2.祖组件 渲染子组件时,外面包裹Context.Provider,通过value属性给后代组件传递数据
<Provider value={username}>
<B>这是子组件</B>
</Provider>
3.孙后代组件读取数据:
//第一种方式:仅适用于类组件
//声明接受context
static contextType=MyContext
//渲染
{this.context.name}
//第二种方式:函数组件与类组件都可以
<Consumer>
{
value=>(//value就是context中的value数据
)
}
</Consumer>
2使用pubsub发送订阅
1 react导入库
npm install pubsub-js --save
2 react 页面引入pubsubjs
import PubSub from 'pubsub-js'
3 pubsubjs使用
发送消息:PubSub.publish(名称,参数)
PubSub.publish('消息通信',{title:'发送消息啦'})
订阅消息:PubSub.subscrib(名称,函数)
this.sub=PubSub.subscribe('消息通信',(_,data)=>{
//数据操作
this.setState(data)
})
取消订阅:PubSub.unsubscrib(名称),一般在页面卸载取消订阅
componentWillUnmount(){
PubSub.unsubscribe(this.sub)
}