两个组件可以具有完全相同的状态，异步更新吗？

Posted 2023-03-16

【中文标题】两个组件可以具有完全相同的状态，异步更新吗？

【英文标题】：Can two components have the exact same state, asynchronously updating?

【发布时间】：2020-11-29 14:29:48

【问题描述】：

上下文：

我正在开发一个 React 应用程序，并且有两个同级组件（注意：没有父子组件关系），它们都有一个相同的状态。它们需要异步更新（即当 Component1 导致状态更改时，Component2 应该知道该状态更改并将更改后的状态用作初始状态）。

问题：

我正在使用 useState(initialValue) 设置每个组件中的状态，但我注意到这导致我的状态不同步，因为状态取决于 Component1 或 Component2 所做的修改。

（即）

如果 Component1 通过某种组件方法导致状态从“红色”变为“绿色”，而在 Component2 中我会这样做：

useState("red")

那么 Component2 没有正确地得到来自 Component1 的“green”信息；而是从初始状态的初始化中接收到“红色”的信息。

PS： 请不要简单地告诉我将状态作为道具传递。提醒这些不是父子组件！

非常感谢任何帮助。我认为这是一个需要解决的重要且常见的 ReactJS 问题。

【问题讨论】：

看看使用上下文提供者共享状态

非常感谢！刚用谷歌搜索，这看起来正是我需要的！

@VigneshPethuraj 您所描述的是recoiljs 的用例。检查 Context API 和 reoiljs 并选择其中一个

【参考方案1】：

如果两个分离的组件之间没有任何关系，为什么它们应该是同步的？重要的问题是，您期望什么事件会导致两个组件的状态发生变化？然后您可以为这两个组件订阅该事件。事件可以是路由器更改、从服务器异步接收数据、基于浏览器的事件（如调整大小）或内存中的常见数据更改。其中一些事件有自己的钩子，例如路线更改。但是，如果您的事件是数据更改，您可以在redux、rxjs 或其他一些状态管理框架中使用公共服务。或者，如果您是专业人士，可以为您的特定活动编写自己的钩子。

如果你分享了一些示例代码，那将会有更多帮助。