如何使用React控制父组件和全局组件

Question

使用React，我很好奇如何利用和操作模态框、应用程序背景、应用程序旋转等不在子组件中的元素。

你应该如何“循环”并向顶层组件（应用程序）发送消息？

我们是否应该通过所有层的props传递回调？

谢谢。

- neaumusic

Answer 1

是的，这被称为反向数据流。状态向下流动层次结构，事件向上冒泡层次结构。

Thinking in React：

由于组件只应更新自己的状态，父组件将向子组件传递回调，每当状态需要更新时就会触发。由父组件传递的属性中的回调将调用setState()，应用程序将被更新。虽然听起来很复杂，但实际上只需要几行代码。而且它非常明确地说明了您的数据如何在整个应用程序中流动。

Lifting state up：

在React应用程序中，任何更改的数据都应该有一个单一的“真相源”。通常，状态首先添加到需要其进行呈现的组件中。然后，如果其他组件也需要它，则可以将其提升到它们最近的共同祖先。不要尝试在不同组件之间同步状态，而应依赖自上而下的数据流。

你需要在许多组件之间管理状态吗？

如果是这样，有一些很好的状态管理库，比如Redux或MobX。对于许多实际应用程序来说，这些库及其React绑定是管理与许多组件相关的状态的不错选择！

当需要将发生的事情与事物如何变化分离时，可以使用这些库。

- AlexB

Answer 2

我开始使用React时也曾经有同样的疑问。让我们称打开/关闭的模态框、应用程序背景、应用程序旋转和类似的东西为您想要跟踪UI状态的内容。

在组件层次结构的复杂部分之间传递回调以管理UI状态不是正确的方法。

存在一些工具可以为您的React UI组件提供数据层。这个数据层独立于您的组件层次结构，允许您控制您需要的每个部分（组件）的任何状态。其思想是拥有一个存储器（文件，其中包含与任何状态相对应的变量），您可以从组件内部导入该存储器，并在其中保存所需跟踪的状态更改（读取变量）。然后，您可以使用这些状态变量在组件内部做出任何必要的决策或传输数据。

--

你有Redux和MobX。后者基本上提供了相同的功能，但学习曲线更缓和。它更容易使用，因为它不要求你在每次更改时指定完整的新状态（重新定义你正在跟踪的所有变量而不仅仅是发生变化的变量）。因此，它更简洁明了。 我建议你先学习Redux以理解数据层概念及其工作原理。我看到Redux声明在具有非常复杂状态的应用程序中很有用。就我个人而言，我从来没有感到过需要。因此，如果您不介意处理额外的打字和复杂性以获取完全控制，则选择Redux。对于实际使用，MobX使事情更简单，让开发更快捷直接。

--

在使用React设计更复杂的应用程序/用户界面时，可以通过组件层次结构上下移动状态数据的方法来实现，但是拥有数据层绝对是必不可少的。

祝好运。

- David Neto

---

你不需要传递所有变量到 setState。 - neaumusic

Answer 3

多年以后，我会补充说，明确地通过所有组件接口传递数据和回调的替代方法是添加一个全局上下文，它会隐式地将数据和回调向下传递。

请查看useContext。

这就是全局状态管理器（如Redux）的工作方式，使您能够连接到全局数据并在那里有效地设置状态。

- neaumusic