React Js UseState 反模式

编写整洁的 React 代码需要智能的状态管理。糟糕的状态模式会导致 Bug 和复杂的代码。

避免以下四个常见错误：

  1. 将相关数据分组

不要为同时变化的数值创建独立的 state hook。

而不是：

  • const [x, setX] = useState(0);
  • const [y, setY] = useState(0);

使用对象：

  • const [position, setPosition] = useState({ x: 0, y: 0 });

这能让你的更新保持整洁且有序。

  1. 避免冲突的状态

当多个布尔值追踪同一个流程时，就会产生 Bug。

与其使用：

  • isSubmitting
  • isSubmit

使用单一的状态字符串：

  • status: 'TYPING'
  • status: 'SUBMITTING'
  • status: 'SUBMITTED'

从这个单一的事实来源（single source of truth）中推导出你的 UI 逻辑。

  1. 移除冗余状态

如果你可以在渲染期间计算出一个值，就不要把它放入 state 中。

不要存储：

  • firstName
  • lastName
  • fullName

只存储姓和名。在渲染时实时计算全名：

  • const fullName = firstName + " " + lastName;

此外，永远不要将 props 存储在 state 中。State 只会初始化一次。如果你的 prop 发生了变化，state 并不会随之更新。请直接使用该 prop。

  1. 停止数据重复

不要将相同的数据存储在两个不同的 state 中。

如果你有一个任务列表和一个选中的任务，不要在两个地方都存储整个任务对象。这会让更新变得困难。

相反：

  • 存储任务列表。
  • 只存储 selectedTaskId。
  • 在渲染期间使用该 ID 从列表中查找任务。

这能确保你选中的任务始终与列表中的最新数据保持一致。

来源：https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9