为什么我们必须在根组件中定义状态?

Question

我正在学习React。我不明白为什么我们必须在根组件中定义状态，也就是App.js。İf我有一个卡组件，我只有一个与卡组件相关的状态，我应该在根组件还是卡组件中定义它?你能帮我理解这个逻辑吗?

谢谢你的回答

Answer 1

每个组件都可以有自己的本地状态。你应该在app中定义你的状态

不同于全局状态，这将需要不同的方法取决于你正在使用的库，但由于你正在学习react，你很快就会遇到上下文Api, Redux, MobX等。

对于卡片的例子，你可以在卡片组件中拥有一个本地状态，但是你可能想要在父元素中管理卡片的数据数组。(不是App，只是上面的一层)如果你需要做一些操作，比如分类/过滤你的卡片。这取决于你需要如何处理你的数据。

Answer 2

在父组件而不是子组件中声明React状态的原因是当状态同时与多个组件相关时。

例如，看看这个结构:

+--------------------+
| App.js             |
| +----------------+ |
| | Title.js       | |
| +----------------+ |
|                    |
| +----------------+ |
| | Description.js | |
| +----------------+ |
+--------------------+

这是我们的数据:

const getData = () => {
return {
title: "some title",
description: "some description"
};
};

如果你试图用我们拥有的结构来呈现这些数据，那么状态必须在App.js层上，我们需要将数据传递给<Title/>和<Description/>。

在您的示例中，如果状态严格适用于Card组件，那么您应该能够在Card组件中声明状态，而不会出现任何问题。

在我看来，只有在多个子节点中使用状态时，它们才需要在父级。