React：组件通信

React：组件通信

父传子：props

React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息。

🌰：child.js

🌰：parent.js

子传父

用回调函数和自定义事件机制实现子组件向父组件传值。

🌰：child.js

🌰：parent.js

兄弟传值

方法一：利用中间组件实现传值，找一个相同的父组件，这时候既可以用props传递数据；

🌰：brotherA.js

🌰：brotherB.js

🌰：parent.js

方法二：context是一个全局变量,像是一个大容器,在任何地方都可以访问到,我们可以把要通信的信息放在context上,然后在其他组件中可以随意取到;

但是React官方不建议使用大量context,尽管他可以减少逐层传递,但是当组件结构复杂的时候,我们并不知道context是从哪里传过来的;而且context是一个全局变量,全局变量正是导致应用走向混乱的罪魁祸首；

🌰：content.js

🌰：contentA.js

🌰：contentB.js

🌰：contentC.js

🌰：contentD.js

🌰：parent.js

方法三：发布订阅模式 Pubsub

安装 pubsub-js

npm install pubsub-js

• 发送消息：PubSub.publish(名称,参数)
• 订阅消息：PubSub.subscrib(名称,函数)
• 取消订阅：PubSub.unsubscrib(名称)

🌰：child.js

🌰：parent.js

方法四：EventBus 事件总线

安装 events

npm install events

🌰：events.js

🌰：childA.js

🌰：childB.js

🌰：childC.js

🌰：parent.js