reactjs - 具有远距离共享状态的 React 组件

Question

我是 React 的新手，所以如果这是一个菜鸟问题请原谅，但我真的无法在 DOC 或其他地方找到答案。

假设我有两个带计数器的按钮，它们共享状态但在 UI 中的位置彼此相距很远。

documentation says两个按钮的公共(public)所有者组件应该拥有状态。如果组件像示例中那样彼此相邻是有意义的，但是如果我的按钮是不同 UI 组的每个部分并且在嵌套方面相距很远怎么办？我的状态持有者将是文档的根，我将不得不通过许多层向下传递处理函数。如果我需要在其他地方添加也需要知道状态的新组件怎么办？我是否必须以向下传递状态的方式修改所有父组件？这是非常不切实际的。

如果没有 React，我会有一些全局订阅/ Release模式，例如 jQuery Observer并且所有 UI 元素都可以订阅/发布它，而不管它们的嵌套位置如何。

React 如何解决这个问题？

---

相关问题:如果我需要将状态加载/保存到数据库，我如何将 Controller (或其他)的引用传递给存储状态的每个 React 组件？

Answer 1

1 对于全局状态，您可以使用 REDUX

Redux 是 JavaScript 应用的可预测状态容器

对于具有该状态的连接/订阅组件，您应该使用react-redux

如果组件在嵌套方面距离较远，您可以将它们连接/订阅到 redux store，并且只获取必需的状态部分。如果只更改必要的部分，它们将更新。

article这解释了你如何做你的案子

要了解如何使用 redux，您可以观看 redux 的创建者的视频 ( Dan Abramov )

1. getting-started-with-redux

2。 building-react-applications-with-idiomatic-redux

3.绝对推荐给你 discordapp rectiflux channel 。因为你总是可以在线提出任何问题。(在那里你可以找到该工具的贡献者)

---

2 比 redux 更简洁的替代方法是 MobX

MobX 是一个久经考验的库，它通过透明地应用函数式响应式(Reactive)编程 (TFRP) 使状态管理变得简单且可扩展。 MobX 背后的理念非常简单:

任何可以从应用程序状态派生的东西，都应该被派生。自动。