在 React.js 中，我将如何设置一个简单的全局事件系统来在组件之间进行通信？

Posted 2023-02-22

【中文标题】在 React.js 中，我将如何设置一个简单的全局事件系统来在组件之间进行通信？

【英文标题】：In React.js, how would I set up a simple global event system to communicate between components?

【发布时间】：2015-10-03 03:55:24

【问题描述】：

在玩弄了一点 React 之后，我想我最喜欢它了，但是有几件事我正在努力弄清楚如何去做。其中之一是不处于父子关系的组件之间的基本通信。

据我从教程中了解到，大多数通信都是通过使用状态和道具的父子关系完成的，这似乎很简单。但是当没有父子关系时，文档推荐setting up a global event system 并留给我自己弄清楚。不太清楚这是什么意思。

让我们以我正在处理的问题为例。我的页面导航栏中有一个<SearchBar /> 组件，我想使用它在页面其他位置的<ResultsTab /> 组件中填充搜索结果。试图通过一个共同的父母来联系这些是不切实际的。那么如何使用 SearchBar 的结果更新 ResultsTab 呢？我确信我可以通过 jQuery 来完成它而忘记 React，但是正确的 React 方法是什么？

【问题讨论】：

嗯，React 文档确实指定您可以使用类似 Flux 模式的东西来实现组件之间的通信。有很多 Flux 实现可供您使用，而且它似乎确实适合 React 的做事方式。

你也可以搜索pubsub。

对于数据（如您的示例），您可以使用通量/主干。对于全局事件，我们使用 pubsub。

【参考方案1】：

Facebook 为此发布了一个名为 Flux 的模式 - https://github.com/facebook/flux。它在简单的应用程序中可能非常冗长，但效果很好。

与所有这些事情一样，社区正在非常快速发展并做出很多改变。我建议习惯非常基本的示例，然后阅读https://medium.com/@dan_abramov/the-evolution-of-flux-frameworks-6c16ad26bb31 并尝试其他一些示例。

@dan_abramov 的https://github.com/gaearon/redux 目前似乎很受欢迎。