React.js：如何选择合适的状态结构

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

……

在这篇文章中，我们将探讨在我们选择react.js项目的状态管理结构时的重要性。

……

当你在写一个React组件时，你需要决定这个组件要使用多少个状态，以及如何使用它们。例如，当我们编写一个组件时，使用了3个状态并且组件工作正常，但你意识到你可以用这3个状态来实现同样的功能。所以，你需要确定一个合适的状态结构。

……

我会谈一谈5个原则，帮助你在选择国家结构时做出更佳的决定。

想想电脑游戏里的一个角色，这个角色可以在x和y坐标上移动。所以，如果你要将这两个x和y值写成状态，该怎么做？

• 不好的方法：

• 一个更好的方法是：

技术上来说，你可以使用这两种方法中的任意一种。但是， ，如果你总是同时更新两个或以上的状态值，考虑将它们合并成一个状态值。

如果你不知道需要多少个状态，可以将它们通过对象或者数组来组织。

此处省略部分内容

想想一个消息应用。你知道当你发送消息时会经历两个不同的阶段。第一个阶段是“消息正在发送中”，第二个阶段是“消息已发送成功”。那么，如果我们把这两个状态定义为两个不同的状态，真和假（比如发送成功和发送失败），你会首先想到什么呢？

• 不好的做法（可能引起冲突）：

由于 isSending 和 isSent 不应同时为真，最好用一个状态变量来替换这两个标志，该状态变量可以取三种有效状态值：'打字中', '发送中', 和 '已发送'

• 一个更棒的方法是：

当你选择组件的状态结构时，如果可以基于组件的props或状态中的变量计算出一些信息， 则不要将这些信息保存在组件的状态里。

• 不好的方法:

• 更好的做法：

当你调用 setFirstName 或 setLastName 方法时，会引发一次重新渲染，然后新的完整名称将根据最新数据重新计算。

良好的状态结构可以让你的组件更容易修改和调试。在这篇文章里，我提到了选择状态结构时应该考虑的3个原则。可能还有其他的原则。如果你想，也可以在评论区讨论这些原则。