组件间通信常见的几种情况
一、父组件到子组件
二、子组件到父组件
三、跨级组件
四、非嵌套组件
子组件Child.js
子组件Child.js
子组件Child.js
父组件Parent.js
组件Aoo.js
组件Boo.js
实际应用中，在组件间进行通信时，这些通信方式都可以使用，区别只在于使用相应的通信方式的复杂程度和个人喜好，选择最合适的那一个。比如，通过事件订阅模式通信不止可以应用在非嵌套组件间，还可以用于跨级组件间，非嵌套组件间通信也可以使用context。
-
React四种组件通信详解
1）父组件到子组件：通常父组件使用props向子组件传递，然后子组件处理 父组件Parent.js 在上面的例子中，父组件Parent通过title属性向子组件Child传递值，子组件Child通过this.prop.title就可以获取到父组件Parent的传递的值 2）子组件到父组件：利用回调函数 父组件Parent.js 上面例子中，在子组件Child中绑定了onClick事件。调用成本cb()方法。在cb()方法中，通过props发送出去一个方法，父组件中去接收这个方法，callback={this.callback}，然后在自身的callback函数中进行一些列操作。 3）跨级组件：即父组件向子组件的子组件通信，向更深层子组件通信 ①中间组件层层传递props ②使用context对象 对于第一种方式，如果父组件结构较深，那么中间每一层组件都要去传递props，增加了复杂度，并且这些props并不是中间组件自己需要的。 使用context方式中context相当于一个全局变量，是一个大容器，我们可以把要通信的内容放在这个容器中，这样不管嵌套多深。都可以随意取用。使用context要满足两个条件：上级组件要声明自己支持context，并提供一个函数来返回相应的context对象、子组件要声明自己需要使用context 父组件Parent.js 子组件的子组件GrandChild.js 4）非嵌套组件：即没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。 ①利用二者共同父组件的context对象通信 ②使用自定义事件 使用二者共同父级进行中转会增加子组件和父组件间的耦合度，如果组件层次比较深，找到二者共同父组件会相对麻烦。 使用自定义事件方式需要使用events包：npm install -S events 创建event.js文件，向外提供一个事件
