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

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《这就是所有优秀 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 开发人员构建其状态的方式》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！