React函数组件如何在循环中多次执行setState实现每轮循环触发重渲染

问题原因 #

React 对同步上下文内的 state 更新默认采用批量合并策略，你在循环内连续调用 updateDataset 都处于同一个同步执行栈中，React 会等到整个 bubbleSort 函数执行完成后才触发一次重渲染，所以看不到中间的排序过程。

解决方案1：异步等待控制执行节奏 #

封装等待函数，每次交换完成后等待指定时长再继续执行，既可以避开批量更新逻辑，也能自定义排序动画的速度，逻辑直观不易出错：

const [dataset, updateDataset] = useState([]);

// 基础等待函数
const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));

async function bubbleSort() {
  const sortedArray = [...dataset];
  // 自定义每轮更新间隔，单位为毫秒
  const renderDelay = 100;
  // 循环变量改用let避免变量提升问题
  for (let i = sortedArray.length; i > 0; i--) {
    for (let j = 0; j < i - 1; j++) {
      if (sortedArray[j] > sortedArray[j + 1]) {
        // 交换元素
        [sortedArray[j], sortedArray[j + 1]] = [sortedArray[j + 1], sortedArray[j]];
        // 传入新数组引用更新state
        updateDataset([...sortedArray]);
        // 等待重渲染完成后再执行下一轮逻辑
        await wait(renderDelay);
      }
    }
  }
}

解决方案2：定时器队列实现 #

如果不想用async/await语法，可以通过递增的延迟时间把每次更新放到不同的宏任务队列中，保证更新顺序正确：

const [dataset, updateDataset] = useState([]);

function bubbleSort() {
  const sortedArray = [...dataset];
  let delay = 100;
  const stepDelay = 100;
  for (let i = sortedArray.length; i > 0; i--) {
    for (let j = 0; j < i - 1; j++) {
      if (sortedArray[j] > sortedArray[j + 1]) {
        [sortedArray[j], sortedArray[j + 1]] = [sortedArray[j + 1], sortedArray[j]];
        // 每次更新延迟递增，保证执行顺序和交换顺序一致
        setTimeout(() => {
          updateDataset([...sortedArray]);
        }, delay);
        delay += stepDelay;
      }
    }
  }
}

注意事项 #

• 循环变量不要使用var声明，避免变量提升导致的取值异常，统一使用let
• 更新state时必须传入新的数组引用，不能直接修改原数组后传入，否则React会判定state无变化，不会触发重渲染
• 如果需要支持中途终止排序，可以用一个useRef存储终止标记，每次循环前判断标记位决定是否继续执行

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