React.js：选择状态结构

如果您喜欢我的文章，您可以请我喝杯咖啡或分享:)

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

选择国家结构

在编写React 组件时，我们需要确定组件中应该包含多少个状态以及如何使用这些状态。例如，在编写一个组件时，我们使用了 3 个状态，并且组件运行正常，但你注意到，你也可以使用 2 个状态来编写相同的组件。因此，你需要确定状态结构。

我将谈论5 个原则，以帮助您在选择国家结构时做出更好的决策。

1. 将相关状态变量分组

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

• 不好的做法：

• 更好的方法：

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

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

2.避免国家矛盾。

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

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

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

• 更好的方法：

3.避免冗余状态

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

• 不好的做法：

• 更好的方法：

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

结论

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