组件状态管理不当会导致各种问题，最主要的是容易出错、产生bug以及配置错误。而良好的状态结构则能构建出易于维护、调试和修改的组件。本文将探讨如何确保组件拥有正确组织的状态结构。
状态结构化基础
React组件通常会用到状态，状态变量的数量取决于组件的设计。即使状态结构不佳，组件也能运行，但我们可以做得更好。以下几点是构建组件状态结构的指导原则：
1. 合并关联状态
如果多个状态值经常同时变化，则应考虑将它们合并。虽然分开管理状态也可以，但合并关联状态能显著降低状态同步出错的概率。例如，处理宽高比：
// 不佳
const [height, setHeight] = useState(500);
const [width, setWidth] = useState(500);
// 较佳
const [aspectRatio, setAspectRatio] = useState({ width: 500, height: 500 });
注意：合并状态到对象后，更新时必须使用展开运算符避免丢失其他属性：
// 错误
setAspectRatio({ width: 750 }); // height 属性丢失
// 正确
setAspectRatio({ ...aspectRatio, width: 750 });
2. 避免状态冲突
例如，提交按钮的状态：加载中、错误和已完成。如果分别使用三个状态变量，容易出现状态不一致的情况（例如同时处于加载中和已完成状态）。更好的方法是使用常量和单个状态变量：
export function ApiResult() {
const state = {
loading: 'loading',
error: 'error',
resolved: 'resolved',
};
const [requestState, setRequestState] = useState(state.resolved);
async function onSubmitClick(event) {
event.preventDefault();
setRequestState(state.loading);
await requestToServer(text);
setRequestState(state.resolved);
}
// ...
}
这种方法确保状态一致性，并避免拼写错误。
3. 避免不必要的状态
在创建状态之前，确保其值无法从props、现有状态或状态值的组合中推导出来。如果可以推导，则应避免将其作为组件状态。
// 不佳
export function Tracker() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const [position, setPosition] = useState({ x: 0, y: 0 });
// ...
}
position 可以由 x 和 y 计算得出，无需单独作为状态存在。
4. 避免状态重复
状态重复会使保持同步变得困难。如果发现使用多个状态来保存相同的数据，应寻找解决方案，例如将状态提升到父组件。
5. 最小化状态嵌套
过度嵌套的状态会使更新变得复杂。解决方案是“扁平化”或“标准化”状态。例如，使用父状态保存子状态ID数组，并创建子状态ID到父状态的映射。 状态嵌套的深度取决于具体情况，但扁平化状态通常能简化更新并避免重复。
注意：可以使用immer库来简化不可变状态的嵌套更新。
如有任何疑问，请随时提出。
