react-typescript

此技能提供了一套完整的模式庫，用於使用 React 19 和 TypeScript 構建現代化、可擴展且類型安全的前端應用程式。它專為希望在專案中實施一致代碼結構的軟體工程師和前端開發人員而設計。透過遵循這些經過實戰檢驗的模式，團隊可以減少技術債、提升代碼維護性，並確保複雜 UI 架構中的高效能。

該技能涵蓋了組件開發的整個生命週期，從具有嚴格型別定義的基礎函數組件，到複雜的資料驅動 Hooks 和狀態管理解決方案。它特別強調現代標準，確保開發人員在保持嚴格 TypeScript 合規性的同時，正確使用最新的 React 特性。無論您是在建構新功能還是重構舊組件，此技能都能提供必要的架構藍圖以提升效率。

• 進階組件模式：透過泛型 Props、子組件管理和模組化設計實作函數組件，確保可重用性和型別安全性。

• 狀態管理生態系統：針對本機組件狀態、複雜 Hooks 以及使用 Context API 或 Zustand 進行全域狀態管理的標準化方法。

• 資料獲取與變更：內建 TanStack Query (React Query) 模式，用於有效處理快取、背景重新獲取和樂觀更新。

• 表單處理與驗證：與 React Hook Form 和 Zod 的緊密整合，強制執行基於 Schema 的驗證和型別安全的表單邏輯。

• 錯誤邊界與效能：實作錯誤邊界以妥善管理應用程式失敗的技術，以及針對渲染效能的最佳化策略。

• 確保所有組件都封裝在適當的介面中，以維持完整的 TypeScript 智能感知和型別覆蓋。

• 針對所有伺服器狀態需求使用 TanStack Query，以減少不必要的網路請求並保持 UI 與後端的同步。

• 始終使用 Zod Schema 進行表單驗證，確保輸入的使用者資料在進入業務邏輯層之前已完成解析與驗證。

• 在編寫自定義 Hooks 時，應專注於關注點分離，將複雜邏輯（如事件監聽器、API 呼叫）從 UI 層中封裝出來。

• 在高階路由組件中使用錯誤邊界，以防止單個組件崩潰導致整個應用程式介面失效。