react组件间通信

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