react组件通信方式之~图解父子组件通信和兄弟组件通信pubsub-js

在React组件设计中，组件间的通信方式多种多样，我们需要根据项目需求、复杂性和组件关系灵活选择。本文主要关注父子组件和兄弟组件的通信方式，其他高级通信方法如Context和mobx等，会在后续文章中单独介绍。

父子组件通信（父子互动）

想象一个场景，我们需要点击按钮打开一个弹框（父传子），关闭后将关闭位置反馈给父组件（子传父）。在React中，常见的操作是通过props和回调函数来实现。例如，父组件传递一个函数给子组件，子组件关闭时调用这个函数并附带位置信息。

兄弟组件通信（方式一：父组件中转）

尽管可以借助父组件作为中转，但这在实际项目中并不常见，因为它会增加代码复杂性。这种方式主要用于了解，实战中推荐其他方法。

兄弟组件通信（推荐：pubsub.js）

pubsub.js是跨框架的解决方案，尤其适合兄弟组件间的消息传递。例如，一个组件点击事件触发，更新另一个组件的状态。下面是一个示例：

总的来说，pubsub.js的发布订阅机制是兄弟组件间通信的常用且灵活的方式，不仅限于兄弟组件，任何层级和关系的组件间通信都能有效应用。

热门标签