一位資深React開發(fā)者花了多年時間構建復雜的企業(yè)級應用，最近卻決定做一個"返璞歸真"的項目——用純React寫一套算法可視化工具，幫助人們真正理解計算機科學的基礎原理。沒有Three.js，沒有Framer Motion，連CSS動畫都沒用。

這個項目叫AlgoCanvas。作者的核心動機很簡單：現(xiàn)有的算法教程要么是一堆靜態(tài)圖示，要么是大段代碼堆砌，都沒法讓人直觀看到算法每一步在做什么。"看著它運行，一下子就懂了"——這是他想達到的效果。

技術棧極其克制：React函數(shù)組件、useState管理動畫狀態(tài)、useRef處理定時器清理、CSS-in-JS內(nèi)聯(lián)樣式。零外部動畫庫。作者的理由很直接：減少依賴，降低學習門檻，讓讀者能一眼看懂核心邏輯。

動畫的實現(xiàn)思路是關鍵。不是邊算邊畫，而是先一次性算出所有中間狀態(tài)，存成數(shù)組，再用setTimeout逐幀回放。以冒泡排序為例，代碼先遍歷數(shù)組，每次比較都把當前數(shù)組快照和正在比較的下標推入steps數(shù)組；交換發(fā)生后，再推入新的快照。最后遍歷steps，每120毫秒更新一次狀態(tài)。

配色系統(tǒng)用三種顏色傳遞信息：紫色代表未排序元素，紅色標記正在比較的位置，青色表示已排序完成。這種設計讓算法的行為在每一幀都一目了然——哪兩個元素在對比、是否發(fā)生了交換、哪些部分已經(jīng)排好，不需要額外解釋。

目前AlgoCanvas只完成了冒泡排序，但作者的計劃清單已經(jīng)列好：二分查找、歸并排序、快速排序、Dijkstra最短路徑算法、二叉搜索樹、哈希表。這些經(jīng)典數(shù)據(jù)結構和算法的可視化都在排期中。

作者在文末向React社區(qū)拋出了三個問題：動畫狀態(tài)有沒有更好的管理范式？下一個該做哪個算法？性能層面還能怎么優(yōu)化？這種開放姿態(tài)也符合項目的初衷——不是展示一個成品，而是邀請更多人參與完善。