我如何在 React 中构建 Bubble Sort 可视化器 — 无动画库

Source: Dev.to

动机

作为一名资深 React 开发者，我已经构建了数十个算法可视化。大多数解释只使用静态图示，只展示最终结果，让人只能猜测每一步到底发生了什么。我想改变这种方式——实时观看算法的运行过程，且不依赖任何外部动画库。

实现

可视化器使用纯 React 函数组件构建：

• useState 用于动画状态
• useRef 用于超时管理
• CSS‑in‑JS 行内样式

关键思路是预先计算 所有 动画步骤，然后通过一个简单的超时循环来回放它们。

bubbleSort 函数

function bubbleSort(array) {
  const arr = [...array];
  const steps = [];

  for (let i = 0; i  arr[j + 1]) {
        // Perform the swap
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
        // Record the state after the swap
        steps.push({
          arr: [...arr],
          comparing: [j, j + 1]
        });
      }
    }
  }
  return steps;
}

回放步骤

steps.forEach((step, index) => {
  setTimeout(() => {
    setArray(step.arr);
    setComparing(step.comparing);
  }, index * 120); // 120 ms between frames
});

可视化图例

• 🟣 紫色 – 未排序的元素
• 🔴 红色 – 正在比较的元素
• 🩵 青色 – 已完全排序的元素

这些颜色可以让人一目了然地看到数组的哪一部分仍在处理，哪一部分已经有序。

接下来

我计划为以下算法和数据结构制作可视化：

• 二分查找
• 归并排序
• 快速排序
• Dijkstra 算法
• 二叉搜索树
• 哈希表

如果你是 React 开发者并且对更好的动画模式有想法、对下一个算法有建议，或有性能优化技巧，欢迎在下方留言！