yuki0916 / frontend-code-interview Goto Github PK

Check out the details of the assessment at home page of the project.

一開始，我通過定義狀態常數來減少錯誤並提升IDE的提示功能，這對於擴展性和資料修改極為方便。為了更靈活地處理樣式與狀態間的互動，我選擇使用clsx進行條件判斷，這比在className中直接編寫邏輯要簡潔得多，儘管這樣做會使得Tailwind的自動提示失效。

這個階段的目標是直接回傳完整的DFS探索路徑。通過這種方式，我們能夠驗證DFS算法的實現是否正確，為動畫化探索奠定基礎。

接著，我將DFS算法從一次性執行改造為逐步展示探索過程的版本。透過引入setTimeout實現非同步操作，為探索過程添加了動畫效果。這一階段的挑戰是尚未能展示回退動作的動畫效果。

為了解決非同步控制的問題，我們從setTimeout的巢狀回調轉向使用async/await，這不僅讓代碼更加清晰，也為增加新功能提供了基礎。

此階段關注於解決探索過程中的退回動作動畫。當DFS算法遇到死路時，能夠有效地回退到上一個節點並繼續探索，這一改進顯著提升了動畫的流暢性和互動體驗。

最終，我們增加了一個讓用戶能夠隨時終止探索並返回初始畫面的互動功能。這一功能是通過useRef實現狀態管理，避免了使用useState可能引起的非同步執行衝突。

在回顧這次迷宮探索項目的開發過程中，我對於如何將複雜問題簡化、逐步解決有了更深的理解和體會。特別是在動畫化DFS探索的階段，我面臨了同時處理退回動作和終止探索功能的挑戰。最初，我嘗試通過setTimeout的巢狀回調來實現這些功能，但這種方法讓我陷入了混亂，難以清晰地控制流程和狀態。

經過一番掙扎，我決定採用async/await的方式重構這部分程式碼。這個改變是轉捩點，它不僅使得程式碼更加清晰易讀，也讓我能夠像處理同步代碼一樣來思考問題。這種方法大大簡化了非同步控制的複雜性，讓我能夠更專注於實現功能本身而不是被非同步執行的細節所困擾。