React四种组件通信详解

组件间通信常见的几种情况

一、父组件到子组件

二、子组件到父组件

三、跨级组件

四、非嵌套组件

React四种组件通信详解

1)父组件到子组件:通常父组件使用props向子组件传递,然后子组件处理
父组件Parent.js

React四种组件通信详解

子组件Child.js

React四种组件通信详解

在上面的例子中,父组件Parent通过title属性向子组件Child传递值,子组件Child通过this.prop.title就可以获取到父组件Parent的传递的值
2)子组件到父组件:利用回调函数
父组件Parent.js

React四种组件通信详解

子组件Child.js

React四种组件通信详解

上面例子中,在子组件Child中绑定了onClick事件。调用成本cb()方法。在cb()方法中,通过props发送出去一个方法,父组件中去接收这个方法,callback={this.callback},然后在自身的callback函数中进行一些列操作。
3)跨级组件:即父组件向子组件的子组件通信,向更深层子组件通信
①中间组件层层传递props
②使用context对象
对于第一种方式,如果父组件结构较深,那么中间每一层组件都要去传递props,增加了复杂度,并且这些props并不是中间组件自己需要的。
使用context方式中context相当于一个全局变量,是一个大容器,我们可以把要通信的内容放在这个容器中,这样不管嵌套多深。都可以随意取用。使用context要满足两个条件:上级组件要声明自己支持context,并提供一个函数来返回相应的context对象、子组件要声明自己需要使用context
父组件Parent.js

React四种组件通信详解

子组件Child.js

React四种组件通信详解
子组件的子组件GrandChild.js

React四种组件通信详解

4)非嵌套组件:即没有任何包含关系的组件,包括兄弟组件以及不在同一个父级中的非兄弟组件。
①利用二者共同父组件的context对象通信
②使用自定义事件
使用二者共同父级进行中转会增加子组件和父组件间的耦合度,如果组件层次比较深,找到二者共同父组件会相对麻烦。
使用自定义事件方式需要使用events包:npm install -S events
创建event.js文件,向外提供一个事件

React四种组件通信详解

父组件Parent.js

React四种组件通信详解

组件Aoo.js

React四种组件通信详解

组件Boo.js

React四种组件通信详解

实际应用中,在组件间进行通信时,这些通信方式都可以使用,区别只在于使用相应的通信方式的复杂程度和个人喜好,选择最合适的那一个。比如,通过事件订阅模式通信不止可以应用在非嵌套组件间,还可以用于跨级组件间,非嵌套组件间通信也可以使用context。