这就是所有优秀 React 开发人员构建其状态的方式-js教程-PHP中文网

这就是所有优秀 React 开发人员构建其状态的方式

碧海醫心

发布： 2025-01-19 08:08:11

原创

449人浏览过

这就是所有优秀 react 开发人员构建其状态的方式

组件状态管理不当会导致各种问题，最主要的是容易出错、产生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 开发人员构建其状态的方式的详细内容，更多请关注php中文网其它相关文章！