使用远离

Question

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

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

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

如果没有React，我会有一些全局的订阅/发布模式，如jQuery Observer，所有UI元素都可以订阅/发布到它，无论它们的嵌套位置如何。

React如何解决这个问题？

相关问题：如果我需要将状态加载/保存到DB，如何将控制器（或Whatever）的引用传递给存储状态的每个React组件？

Answer 1

全球州的

1 您可以使用 REDUX

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

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

如果组件在嵌套方面很远，您可以将它们连接/订阅到redux存储，并且只接受状态的必要部分。如果只更改了必要部件，他们将更新。

article解释了如何处理您的案件

要了解如何使用redux ，您可以观看来自redux创建者的视频（Dan Abramov）

1。getting-started-with-redux

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

3.我绝对向您推荐 discordapp rectiflux 频道。因为你总是可以在网上提出任何问题。（你可以找到那些工具的贡献者）

2 替代方式，减少详细，然后redux MobX

MobX是一个经过实战测试的库，它通过透明地应用功能反应式编程（TFRP）使状态管理变得简单和可扩展。 MobX背后的理念非常简单：

应该派生任何可以从应用程序状态派生的内容。自动。

Answer 2

我建议查看Flux stores。简而言之，商店就像你的应用程序中的模型。您可以收听更改（订阅）并修改其属性（发布）。你可以在example app中看到它是如何完成的。

Answer 3

更好的选择是使用Redux。

Redux以更简单的方式启用像你这样的用例:) 它将帮助您处理所有状态，让您的生活更轻松。

一些很好的学习资源：

• The Redux Website

• Video courses from Dan Abramov, the creator [免费]

• Awesome course on Udemy [不免费]

• Building Applications with React and Redux in ES6

• 最后看看this youtube series [免费]

Answer 4

应尽可能避免在应用的中间层管理状态。此数据属于商店，该商店保存应用程序的全局状态。然后每个组件通过其道具访问状态。

将数据传递到组件的天真方法是“手动”通过商店的所有层传递商店，即通过道具。

存在更智能的替代方案，它们使用连接的组件，通过上下文（而不是道具）访问全局状态。通常，表示组件（您的按钮组件）包装在一个容器组件中，该组件处理与商店的这种连接，然后通过props传递数据。

有许多框架可以促进这一过程，其他答案中已经提供了链接。

Answer 5

如果您尝试分享简单状态，请尝试此操作（我是作者）：react-provide-state

否则我会推荐Redux。它已成为管理应用程序状态的最流行的工具。

在正在处理的应用程序中，我们使用Redux来管理主应用程序状态和几乎所有其他状态。但我们使用“反应 - 提供 - 状态”＃39;对于简单的，仅UI状态，如Modal，Checkbox状态。