React.js：选择状态结构

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

---

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

---

选择国家结构

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

---

我会讲5个原则来帮助你在选择状态结构时做出更好的决策。

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

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

• 错误的方法：

• 更好的方法：

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

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

---

2.避免国家矛盾。

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

• 错误的方法（冲突风险） :

由于 isSending 和 isSent 永远不应该同时为 true，因此最好将它们替换为一个状态变量，该变量可能采用三种有效状态之一：“正在输入”、“正在发送”和“已发送”

• 更好的方法：

---

3.避免冗余状态

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

• 错误的方法：

• 更好的方法：

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

---

结论

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

以上是React.js：选择状态结构的详细内容。更多信息请关注PHP中文网其他相关文章！