什么是正确的React体系结构？

Question

在创建React应用程序时，我当前正在创建一个应用程序，其中父组件正在处理和管理所有状态更改。我将必要的状态和功能传递给每个孩子作为道具。这是这样做的“首选”方式，还是子组件应该处理/管理自己的状态？

Answer 1

这种方法可以工作一段时间，但是您很快就会发现整个应用程序逻辑都被推到了顶部组件，并且将其向下传递到许多嵌套的子组件层以使其到达原处需要走。

一种方法是将各种状态尽可能地向下移动（但不能进一步移动）。 Thinking in React文章对此进行了讨论。因此，如果应用程序的一个子树仅需要某些状态或状态更改功能，只需将其放在该子树的顶部即可。但这似乎仍然很混乱，尤其是当您的应用程序中需要大量数据时。

新颖的Context功能可以帮助解决通过多层组件传递数据的问题。但这并不能改变您的许多状态和状态修改功能卡在顶部组件中的事实。

要解决这个问题，您需要研究一种状态管理工具，例如MobX或Redux。尽管Redux非常受欢迎，但我发现MobX适应起来要容易一些。基本上，您最终会将所有应用程序数据和逻辑从React组件中移出，并移入它们自己的类中。使用mobx-react，您将配置这些类（或其某些属性），以将它们作为属性直接“注入”到各个React组件中。然后MobX将“观察”这些类中的某些值，并告诉React组件在更改时重新呈现。

这需要一点时间来适应，但是我对结果非常满意。令人沮丧的是，大多数React教程都忽略了这个问题，或者听起来像只需要MobX / Redux来处理非常高级的用例。除了非常简单的演示之外，我发现它们是必需的。

Answer 2

如果组件需要具有自己的状态，而其父级不关心该状态，则我认为没有任何理由在父级中对其进行定义。

在父级中定义这样的状态会增加不必要的复杂性。这也会使维护变得困难。

如果在本地状态中定义了本地状态，将更容易理解和维护代码。

Answer 3

这全都归结为一个问题，

该组件是可重复使用的独立组件吗？

如果是，则它可以具有自己的状态，可以轻松插入任何组件中。

---

最好在确定状态放置位置时考虑这些指针。

• 有些组件不能独立存在，只能在父组件中使用。在这种情况下，最好将状态存储在父级中并向下钻取给子级。
• 有些组件仅关注UI逻辑，例如，具有验证的输入框。在这种情况下，将输入验证的状态放在组件本身中是一个好主意，因为父级不必关心验证逻辑。
• 如果多个子组件依赖于父级的数据/值，则最好将状态置于父级。

经验法则是，始终将状态存储在父级中，除非子级是完全独立的，并且也可以在其他父级组件上使用。