react之组件间通信

父子组件：props
兄弟组件：消息订阅-发布、集中式状态管理
祖孙组件(跨级组件)：消息订阅-发布、集中式状态管理、conText(开发用的少，封装插件用的多)

props

• 父传子：直接传递数据。

• 子传父：父组件传递给子组件函数，当子组件调用父组件中的函数时，数据以函数参数的形式传递到父组件。

消息订阅-发布

消息订阅-发布的理念为：

在A组件中订阅数据，当有其他组件发布匹配名称的数据时，A将接收到数据。

PubSubJS工具库的使用

安装依赖

npm install pubsub-js --save

引入

import PubSub from 'pubsub-js'

订阅-接收数据

PubSub.subscribe('xxxx', function(data){ });

发布-发布数据

PubSub.publish('xxxx', data)

集中式状态管理

react集中式状态管理

conText---生产者-消费者模式

//创建Context容器对象：	
const XxxContext = React.createContext()  

//渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据
<xxxContext.Provider value={数据}>		
    <子组件/>    
</xxxContext.Provider>  

//后代组件读取数据：

//第一种方式:仅适用于类组件 	  
static contextType = xxxContext  // 声明接收context	  
this.context // 读取context中的value数据	 

//第二种方式: 函数组件与类组件都可以	  
<xxxContext.Consumer>	    
    {	      
        value => ( // value就是context中的value数据	        
            要显示的内容	      
        )	    
    }	  
</xxxContext.Consumer>