如何在React中使用useState实现冒泡排序的延时效果？

你的核心需求是让冒泡排序的每一次交换操作后暂停，直观展示排序过程。当前代码直接在同步循环中调用setRandomHeights，由于React状态更新是异步批量处理的，循环会直接执行到结束，你看不到中间的交换步骤。下面是具体的实现方案：

关键思路 #

1. 将排序函数改为异步函数，使用async/await配合Promise实现延时
2. 每次交换后，等待指定时长再继续下一轮循环，给React足够的时间渲染当前状态
3. 确保每次状态更新传递的是数组新副本，触发React重渲染

实现代码 #

首先定义一个通用的延时函数：

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

然后修改你的冒泡排序函数：

// 可选：添加排序状态锁，防止重复触发
const [isSorting, setIsSorting] = useState(false);

const sortDivs = async () => {
  if (isSorting) return;
  setIsSorting(true);
  
  let newArr = [...randomHeights];
  // 外层循环：控制排序轮数
  for (let i = 0; i < newArr.length; i++) {
    // 内层循环：每轮比较交换，优化条件减少不必要的循环
    for (let j = 0; j < newArr.length - i - 1; j++) {
      if (newArr[j].height > newArr[j+1].height) {
        // ES6解构语法交换元素，更简洁
        [newArr[j], newArr[j+1]] = [newArr[j+1], newArr[j]];
        // 传递数组新副本，确保React检测到状态变化
        setRandomHeights([...newArr]);
        // 暂停指定时长，可根据需求调整毫秒数
        await delay(500);
      }
    }
  }
  
  setIsSorting(false);
};

要点说明 #

• 异步函数与await：sortDivs声明为async函数，才能使用await暂停执行，让React完成当前状态的渲染
• 数组副本：每次调用setRandomHeights时传入[...newArr]，而不是直接传newArr，因为React通过引用对比判断状态是否变化，相同引用不会触发重渲染
• 防重复触发：添加isSorting状态锁，避免用户在排序过程中重复点击触发多个排序进程，导致状态混乱
• 循环条件优化：内层循环条件改为newArr.length - i - 1，因为每轮排序后，最后i个元素已经是有序的，无需再比较

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