在React中更新包含函数的嵌套状态：一种高效的不可变策略-js教程-PHP中文网

在React中更新包含函数的嵌套状态：一种高效的不可变策略

本教程旨在解决react应用中更新深度嵌套状态时，如何高效且安全地处理包含函数的属性。通过采用函数式状态更新和不可变数据操作，我们能够避免直接修改状态，确保组件的正确渲染和数据流的清晰。文章将详细介绍如何利用展开运算符和数组映射等技术，优雅地更新复杂对象中的函数引用，从而提升代码的可维护性和健壮性。

理解React状态更新与不可变性

在React开发中，管理组件状态是核心任务之一。当状态结构变得复杂，特别是涉及多层嵌套对象或数组时，更新特定部分的状态可能会变得棘手。一个常见的挑战是，当嵌套状态中包含函数引用时，如何以一种符合React最佳实践的方式进行更新。直接修改现有状态对象会导致不可预测的行为，因为React依赖于状态引用的变化来触发组件重新渲染。因此，遵循不可变性原则至关重要，即每次状态更新都应该创建一个新的状态对象，而不是修改旧对象。

问题场景：更新包含函数的嵌套状态

考虑一个场景，你的React状态中存储了图表数据，其中包含一个用于生成工具提示（tooltip）的JavaScript函数。例如，completionRateData 状态可能包含以下结构，其中 tooltip.callbacks.label 是一个函数：

const [completionRateData, setCompletionRateData] = useState({
  // ... 其他数据
  datasets: [
    {
      // ... 其他数据集属性
      tooltip: {
        callbacks: {
          label: function(context) {
            // ... 工具提示逻辑
            return " " + percentage;
          }
        }
      }
    }
  ]
});

当需要更新 completionRateData 中的数据（例如，根据新的时间段更新完成率），同时又需要保留或更新这个 label 函数时，一个直观但不够理想的做法是手动复制整个状态对象，然后逐层修改，最后再手动复制并替换函数：

// 假设 completionRateClone 是 prevData 的一个深拷贝
completionRateClone.datasets[0].tooltip.callbacks.label = function(context) {
  let value = context.formattedValue;
  let sum = 0;
  let dataArr = context.chart.data.datasets[0].data;
  dataArr.map(data => {
    sum += Number(data);
  });
  let percentage = (value * 100 / sum).toFixed(0) + '%';
  return tasksForPeriod.length ? " " + percentage : "";
};
// 然后用 completionRateClone 更新状态
// setCompletionRateData(completionRateClone);

这种方法虽然能达到目的，但存在以下缺点：

繁琐且易错： 手动深拷贝和逐层修改增加了代码的复杂性和出错的可能性，尤其当状态结构更深时。
效率低下： 可能涉及不必要的深拷贝操作。
违背React原则： 如果 completionRateClone 不是一个真正的深拷贝，或者在更新过程中不小心修改了原始状态，可能会导致难以追踪的bug。

推荐方案：函数式状态更新与不可变数据操作

为了优雅且安全地更新包含函数的嵌套状态，我们应该结合使用React的函数式状态更新和JavaScript的不可变数据操作技术（如展开运算符 ... 和数组的 map 方法）。

React Wrap

React UI？—— JavaScript？

下载

核心思想：

函数式更新： 使用 setCompletionRateData(prevData => ...) 形式，确保我们总是基于最新的 prevData 来计算新状态。
不可变更新： 在更新嵌套属性时，从顶层开始，逐层创建新的对象或数组副本，只修改需要更新的部分，其余部分通过展开运算符 ... 保持不变。

以下是具体的实现示例：

setCompletionRateData((prevData) => ({
  ...prevData, // 复制 prevData 的所有顶层属性
  datasets: prevData.datasets.map((dataset) => ({ // 遍历 datasets 数组，为每个 dataset 创建新对象
    ...dataset, // 复制当前 dataset 的所有属性
    tooltip: { // 创建一个新的 tooltip 对象
      callbacks: { // 创建一个新的 callbacks 对象
        label: function (context) { // 直接定义新的 label 函数
          let value = context.formattedValue;
          let sum = 0;
          let dataArr = context.chart.data.datasets[0].data;
          dataArr.map((data) => {
            sum += Number(data);
          });
          let percentage = ((value * 100) / sum).toFixed(0) + '%';
          // 注意：tasksForPeriod 变量应在函数作用域内可访问或作为参数传入
          return tasksForPeriod.length ? ' ' + percentage : '';
        },
      },
    },
  })),
}));

代码解析：

setCompletionRateData((prevData) => ({ ... }))：这是React中更新状态的推荐方式，当新状态依赖于旧状态时尤其有用。prevData 参数保证我们获取到的是最新的状态快照。
...prevData：这行代码创建了一个 prevData 的浅拷贝。它将 prevData 的所有属性复制到新的对象中。这意味着除了 datasets 属性外，completionRateData 的其他顶层属性都保持不变。
datasets: prevData.datasets.map((dataset) => ({ ... }))：由于 datasets 是一个数组，我们需要使用 map 方法来创建一个新的数组，而不是直接修改 prevData.datasets。map 方法会遍历原数组中的每个 dataset，并返回一个由新 dataset 对象组成的新数组。
...dataset：在 map 内部，我们同样使用展开运算符复制当前 dataset 对象的所有属性，以保持其不可变性。
tooltip: { callbacks: { label: function (context) { ... } } }：这是更新 label 函数的关键部分。我们直接创建新的 tooltip 和 callbacks 对象，并在 label 属性处赋值为新的函数。由于层级是 tooltip -> callbacks -> label，我们需要逐层创建新的对象，以确保只有 label 函数被替换，而其父级对象（callbacks 和 tooltip）也被新的引用所替代，从而触发React的更新机制。

注意事项与最佳实践

不可变性是核心： 始终记住在更新嵌套状态时，要创建新的对象和数组引用，而不是直接修改旧的。这对于React的性能优化（如 shouldComponentUpdate 或 React.memo）和避免意外的副作用至关重要。
函数式更新： 当新状态依赖于旧状态时，务必使用 setX(prevX => ...) 形式。这可以防止在异步更新或多个状态更新批处理时出现竞态条件。
深层嵌套的挑战： 对于非常深层嵌套的状态，手动逐层展开可能会变得冗长。在这种情况下，可以考虑使用一些辅助库（如 Immer.js）来简化不可变更新的逻辑，让你可以像直接修改状态一样编写代码，而库会在底层处理不可变更新。
外部变量引用： 示例中的 tasksForPeriod 变量需要在 label 函数的作用域内可访问。确保这些外部依赖项在函数定义时是可用的，或者作为参数传递给函数。
性能考量： 频繁地创建大量新对象可能会有轻微的性能开销，但在大多数React应用中，这种开销通常可以忽略不计，而且它带来的可维护性和避免bug的好处远大于此。