反应组件交互和全局状态变化

React component interaction and global state changes

本文关键字：全局状态变化交互组件更新时间：2023-09-26

我对React很陌生，只是在尝试它。我想知道一些常见的模式，或者是处理组件之间通信的内置库。例如，我有一个输入组件和一个根据输入控制器中的内容从服务器更新的"列表"组件。想象一个自动完成框。既然组件有表示逻辑，那么如果两者不能是"除"呢？它们位于页面的不同部分，因此有两个不同的控制器。

另外，如果我有一个通过Ajax工作的登录/注销按钮，该怎么办？我想象页面上的许多不同组件对登录/注销操作做出反应，根据全局"已登录"状态和从服务器检索到的已登录特定用户的数据重新配置自己。

React对这些变化做出"反应"的最佳方式是什么？感谢

您应该签出Flux和Dispatcher。这有点像酒吧/酒吧系统，但没有酒吧/酒吧的问题。优点是所有事件都朝一个方向流动，这使得体系结构更加简单和可扩展。

如果你还没有，你应该查看Facebook的官方React文档。他们有一个非常全面的教程，涵盖了您将遇到的90%的场景，包括组件交互的最佳实践。他们也非常擅长在没有知识的基础上进行建设。只需大约20分钟即可完成：https://facebook.github.io/react/tutorial/tutorial.html

正如另一个答案中所提到的，Redux是一个令人惊叹的库，用于处理应用程序状态，并将不应该相互了解的组件分开。基本上，您可以有父组件和子组件，但如果您有一个组件有超过2个级别的子组件，您应该考虑使用Redux（或Flux）来处理不相关组件之间的状态。redux解决的问题只是打破这些依赖关系，并仍然允许组件拥有单一的真相来源。他们的官方文件也非常好：http://redux.js.org/