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

结构不良的 React 组件状态是错误、错误和困难调试的滋生地。 然而，结构良好的状态会产生更干净、更易于维护且更易于调试的组件。让我们探索有效状态管理的关键原则。

数据结构基础知识

React 组件通常依赖于状态。 状态变量的数量和对象状态中的属性是开发人员的选择。 即使结构不太理想，组件也可能发挥作用，但我们可以努力做得更好。 这些指南将帮助您就组件的状态结构做出明智的决策：

1。合并互连状态： 应该对经常更新的状态进行分组。虽然分离状态是可以接受的，但合并互连状态可以显着降低同步错误的风险。 例如，考虑纵横比：

<code class="language-javascript">// Less efficient:
const [height, setHeight] = useState(500);
const [width, setWidth] = useState(500);

// More efficient:
const [aspectRatio, setAspectRatio] = useState({ width: 500, height: 500 });</code>

请记住，合并到对象时，请使用扩展运算符更新所有属性，以避免丢失数据：

<code class="language-javascript">setAspectRatio({ ...aspectRatio, width: 750 }); // Correct
// setAspectRatio({ width: 750 }); // Incorrect</code>

2。避免状态冲突： 考虑一个提交按钮。 您可以使用状态来指示加载、错误和成功。 以下结构是有问题的：

<code class="language-javascript">// Problematic structure:
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [resolved, setResolved] = useState(true);</code>

此设置允许矛盾的状态（例如，同时加载和解析）。 更好的方法使用常量来表示状态：

<code class="language-javascript">// Improved structure:
const STATE = {
  loading: 'loading',
  error: 'error',
  resolved: 'resolved',
};
const [requestState, setRequestState] = useState(STATE.resolved);</code>

这可以防止状态冲突并使错误跟踪更容易。

3。避免不必要的状态： 在创建状态之前，检查该值是否可以从渲染期间的 props、现有状态或状态组合派生。 如果可导出，请避免将其添加为组件状态。

<code class="language-javascript">// Inefficient:
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const [position, setPosition] = useState({ x: 0, y: 0 });</code>

这里，position是多余的。 删除 position 或消除 x 和 y。

4。消除状态重复：重复的状态很难保持同步。如果您发现自己使用多个状态来维护相同的数据，请合并它们，这可能会将状态提升到更高的组件级别。

5。最小化状态嵌套： 深度嵌套的状态很难更新。 “扁平化”或“标准化”它。考虑使用 ID 数组以及从 ID 到数据的单独映射，而不是嵌套对象。 嵌套的深度是一种权衡，但更扁平的状态可以简化更新并降低重复风险。 像 Immer 这样的库可以帮助管理不可变的嵌套状态。

如有任何疑问，请留言。

以上是这就是所有优秀 React 开发人员构建其状态的方式。的详细内容。更多信息请关注PHP中文网其他相关文章！