React.js：选择状态结构

如果你喜欢我的文章，你可以给我买杯咖啡或者分享:)

在本文中，我们将探讨在 **react.js** 项目中 **选择状态结构** 时的重要点。

选择国家结构

在编写**React 组件**时，我们需要决定组件中应有多少个**状态**以及如何使用这些状态。**例如**，在编写组件时，我们使用了 3 个状态，并且我们的组件可以正常工作，但您注意到您可以使用 2 个状态编写相同的组件。因此，**您需要决定状态结构**。

我将讲述**5 个原则**，以帮助您在选择**状态结构**时做出更好的决策。

1. 对相关状态变量进行分组

**想象一下电脑游戏中的角色**，这个角色可以在 x 和 y 坐标中移动。那么，如果你想将这些 x 和 y 值写为状态，你会怎么做？

从技术上讲，您可以使用其中任何一种方法。但是，**如果您总是同时更新两个或多个状态变量，请考虑将它们合并为一个状态变量**。

如果您不知道需要多少个状态，您可以**使用对象或数组对状态进行分组**。

2.避免国家矛盾。

想象一下一个消息应用程序。您知道，当您批准发送消息时，有两个不同的阶段。第一个是“消息正在发送”，第二个是“消息已发送”。那么，如果我们将这两个状态声明为两个不同的状态，即 **真** 和 **假**，我们首先想到的是什么？

由于 isSending 和 isSent 永远不应同时为真，因此最好用一个状态变量替换它们，该状态变量可以采用以下三个有效状态之一：“打字”、“发送”和“已发送”

3. 避免冗余状态

**在选择组件的状态结构时**，你需要如果可以从组件的 props 或现有的状态**变量**中计算出一些**信息**，则你不应该将这些信息保留在组件的状态中。

**当您调用 setFirstName 或 setLastName 时，您会触发重新渲染，然后会根据最新数据计算下一个全名。**

结论

**良好地构建状态可确保您拥有易于修改和调试的组件**。在本文中，我谈到了**选择状态结构**时应考虑的 3 个原则。可能还有更多这样的原则。如果您愿意，您可以在评论中讨论这些原则。