排序可视化工具高亮异常：交换后高亮未正确更新

你遇到的核心问题是DOM元素与数据索引的同步失效：

1. 初始获取的bars是静态DOM集合，当setBarsToRender更新状态触发DOM重排后，这个集合不会自动更新，导致后续迭代中bars[anim.highlightedIndex]指向的是旧位置的元素。
2. 高亮逻辑没有全局维护当前高亮元素，移除操作仅针对当前迭代的highlightedBar，容易残留旧的高亮样式。
3. setBarsToRender是异步更新React状态，DOM更新滞后于代码执行，后续循环拿到的还是未更新的DOM结构。

1. 给每个柱状条添加唯一标识 #

生成数据时为每个bar分配唯一ID，避免依赖易变的数组索引定位元素：

// 示例：生成带唯一ID的初始柱状条数据
const generateInitialBars = () => {
  return Array.from({ length: 15 }, (_, index) => ({
    correctPos: Math.floor(Math.random() * 100),
    id: `bar-${index}` // 全局唯一ID
  }));
};

2. 修改排序算法，用ID标记高亮目标 #

不再用数组索引记录高亮，改用bar的唯一ID，确保交换后仍能精准定位：

const selectionSort = (arr) => {
  const animations = [];
  const copy = [...arr];
  for (let i = 0; i < copy.length - 1; i++) {
    let minIdx = i;
    for (let j = i + 1; j < copy.length; j++) {
      if (copy[j].correctPos < copy[minIdx].correctPos) {
        minIdx = j;
      }
    }
    const targetBar = copy[minIdx];
    // 用highlightedId替代highlightedIndex
    animations.push({
      action: "color",
      arr: [...copy],
      highlightedId: targetBar.id,
      swap1: i,
      swap2: minIdx,
    });
    swapBarsMutable(copy, i, minIdx);
    animations.push({
      action: "move",
      arr: [...copy],
      highlightedId: targetBar.id,
      swap1: i,
      swap2: minIdx,
    });
  }
  return animations;
};

3. 修复动画函数，同步DOM并管理高亮状态 #

每次迭代重新获取DOM元素，等待DOM更新完成，并维护全局高亮引用避免残留：

const animateArrayUpdate = async (animations) => {
  let currentHighlight = null; // 记录当前高亮的DOM元素

  for (let i = 0; i < animations.length; i++) {
    const anim = animations[i];

    // 先清除上一次的高亮
    if (currentHighlight) {
      currentHighlight.classList.remove(barStyles["bar-highlighted"]);
      currentHighlight = null;
    }

    // 重新获取最新的DOM柱状条集合
    const allBars = barsContainer.current.children;
    // 通过ID定位目标柱状条
    const targetBar = Array.from(allBars).find(bar => bar.dataset.barId === anim.highlightedId);

    if (anim.action === "color") {
      if (targetBar) {
        targetBar.classList.add(barStyles["bar-highlighted"]);
        currentHighlight = targetBar;
      }
      // 等待高亮展示
      await new Promise(resolve => {
        timers.current.push(setTimeout(resolve, 2000));
      });
    }

    if (anim.action === "move") {
      setBarsToRender(swapLefts(anim.arr, anim.swap1, anim.swap2));
      // 等待DOM重排完成，避免后续操作拿到旧DOM
      await new Promise(resolve => requestAnimationFrame(resolve));
    }
  }

  // 清理最后一次残留的高亮
  if (currentHighlight) {
    currentHighlight.classList.remove(barStyles["bar-highlighted"]);
  }
  setIsPlaying(false);
};

4. 渲染时绑定ID到DOM属性 #

在柱状条组件中，把唯一ID绑定到data-bar-id属性，方便后续查询：

// 柱状条渲染示例
{barsToRender.map(bar => (
  <div
    key={bar.id}
    data-bar-id={bar.id}
    className={barStyles.bar}
    style={{ height: `${bar.correctPos}%` }}
  />
))}

额外优化：清理定时器避免内存泄漏 #

在组件卸载或停止播放时，清空所有未执行的定时器：

useEffect(() => {
  return () => {
    timers.current.forEach(timer => clearTimeout(timer));
    timers.current = [];
  };
}, []);

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