react中的通信方式

1.props传值：

适用于层级不深的父子组件传值

1.1父组件向子组件传值：使用props逐步向子组件传递参数
1.2子组件向父组件传值：使用父组件传递的函数传参

2.自定义事件

使用emitter，可用于兄弟组件
首先安装event
在组件内引入

import emitter from './event'

传值：

emitter.emit('函数名',参数)

接收值：

componentDidMount(){
	emitter.addListener('函数名',callback)
}

组件卸载时移除监听：

componentWillUnmount(){
	emitter.removeListener('函数名',callback)
}

3.context传值
通过Provider和Consumer传递，可用于跨级组件

父组件：

const MyContext = React.createContext(defaultValue);
class Box extends React.Component{
	static MyContent=MyContext;
	render(){
		let context={
			name:'zzz'
		}
		return(
			<MyContent.Provider value={context}>
				<List>
					<Item/>
				</List>
			</MyContent.Provider>
		)
	}
}

子组件：

class Item extends React.Component{
	static MyContent=MyContext;
	render(){
		return(
			<MyContent.Consumer>
				{context.name}
			</MyContent.Consumer>
		)
	}
}

3.消息订阅和发布

安装pubsub-js

yarn add pubsub-js

引入

import PubSub from "pubsub-js"

使用：
子组件发布消息：

PubSub.publish('addItem',obj)

父组件订阅消息，在组件挂载完成之后调用：

componentDidMount(){
	PubSub.subscribe('addItem',(msg,obj)=>{
		if(msg=='addItem'){
			....
		}
	})
}

父组件取消订阅消息，在组件将要销毁时调用：

componentWillUnmount(){
	PubSub.unsubscribe('addItem')
}