React冒泡排序可视化中setTimeout导致state变更不连续渲染问题

架构老林

2026-10-25

问题核心原因

未生成新的数组引用，导致React状态检测失效
React中useState更新状态时，会通过浅比较判断新旧状态是否一致：如果传入的新值和旧值是同一个对象引用，哪怕对象内部的属性发生了修改，React也会判定状态没有变化，直接跳过重渲染流程。
你的代码中，bubbleSort函数在开头仅创建了一次newArray = [...array]，后续所有setTimeout回调都是在直接修改这同一个数组实例的元素。第一次调用setArrayForSort(newArray)时，传入的数组引用和初始的state引用不同，因此React能正常触发渲染，显示首次交换后的数组；但之后的所有setArrayForSort调用，传入的都是同一个数组引用，和第一次更新后的state引用完全一致，React会直接判定状态没有变化，跳过重渲染流程。
控制台能看到完整的排序变化，是因为console.log打印的是同一个数组对象的实时内存引用，即使不触发重渲染，数组内部的元素修改是真实生效的，因此控制台输出和页面渲染状态出现了脱节。
定时器触发逻辑不符合分步动画预期
你在双层排序循环中，把所有setTimeout的延迟都设置为固定2000ms，本质是点击按钮后所有定时器会在2秒后的同一时间点并发执行，并不是按冒泡排序的步骤依次间隔2秒运行。只是因为对同一个数组的修改顺序刚好匹配冒泡逻辑，才会在控制台看起来是按步骤输出的。
另外原代码的内层循环边界存在越界问题：循环条件为j < n - i，当j走到循环末尾时，j + 1会超出数组的最大索引，导致和undefined值做比较，产生逻辑错误。

修复方案

每次更新状态时生成新的数组引用：在定时器回调中完成元素交换后，不要直接把原数组传给setArrayForSort，而是对修改后的数组做一次浅拷贝生成新的实例，让React能检测到状态变化，触发重渲染。
累计定时器延迟实现分步动画：按冒泡排序的执行步骤累计计算每个定时器的延迟时间，让每一步的排序操作依次间隔2000ms执行，实现真正的逐帧渲染效果。
修正内层循环的边界：将内层循环的终止条件调整为j < n - i - 1，避免数组索引越界。

修改后的核心排序逻辑示例：

const bubbleSort = (array) => {
  let newArray = [...array];
  let n = newArray.length;
  // 记录执行步骤数，用来累计定时器延迟
  let stepIndex = 0;

  for (let i = 0; i < n; i++) {
    // 修正循环边界，避免j+1越界
    for (let j = 0; j < n - i - 1; j++) {
      // 累计计算当前步骤的延迟时间
      const currentDelay = stepIndex++ * 2000;
      setTimeout(() => {
        if (newArray[j] > newArray[j + 1]) {
          [newArray[j], newArray[j + 1]] = [newArray[j + 1], newArray[j]];
        }
        // 生成新的数组引用，触发React重渲染
        setArrayForSort([...newArray]);
      }, currentDelay);
    }
  }
};

内容的提问来源于stack exchange，提问作者Siddhesh