React组件通信的三种方式

React组件的三种通信方式

第一种：通过prop来传递一般数据或者函数

通过prop传递数据只能是一层一层传递。比如孙子组件需要更新父组件的state,就需要调用父组件的更新state方法。这样的情况下，父组件就得将更新函数作为prop传入到子组件，子组件再将prop中父组件传来的更新函数传递给孙子组件，这样层层调用。 但是这未免有些太繁琐，下面就给出第二种。

第二种：通过消息发布和订阅的机制

首先需要再React工程文件下载pubsub-js文件

npm install pubsub-js --save

然后再项目中引入文件

import PubSub from 'pubsub-js' //引入
PubSub.subscribe('delete', function(msg,data){
    
     }); //订阅
PubSub.subscribe('delete', (msg,data)=>{
    
     }); //订阅
PubSub.publish('delete', data) //发布消息

这种方法需要注意的是在消息订阅的时候回调函数的设置最好用箭头函数做,这样可以不影响函数中this的指向。箭头函数传送门

第三中方法：redux

……后续更新内容