组件状态管理不当会导致各种问题，最主要的是容易出错、产生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库来简化不可变状态的嵌套更新。
如有任何疑问，请随时提出。
以上就是这就是所有优秀 React 开发人员构建其状态的方式的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2642423.html
