react-ui-patterns

此技能為實現 React UI 組件提供了一個全面的框架，重點在於可靠性、狀態管理與使用者體驗。專為建構可擴展 React 應用程式的前端開發人員與軟體工程師設計，旨在於載入狀態、非同步資料獲取與錯誤處理之間保持嚴格的一致性。透過強制執行清晰的 UI 狀態階層——優先考慮錯誤檢測、條件載入，最後是空狀態——此技能協助開發人員避免常見的陷阱，例如過時資料閃爍或無聲的錯誤吞噬。使用者將利用此技能標準化處理複雜 UI 邏輯的方法，確保每個介面元素無論在何種網路或 API 狀況下都能可預測地運作。此處定義的模式促進了防禦性程式設計實踐，例如在資料變更時停用按鈕、實作穩健的錯誤報告，以及根據特定的內容特性使用骨架屏或載入轉圈。它有效地縮小了原始資料獲取與精緻使用者介面之間的差距，確保即使在處理失敗時，終端使用者也能隨時了解狀況。

• 標準化載入狀態邏輯，確保僅在無資料時顯示載入指示器，防止 UI 閃爍。

• 實作從內聯表單驗證到全頁錯誤畫面的嚴格錯誤處理階層。

• 強制要求所有集合與清單必須具備空狀態，以提升內容可發現性。

• 提供按鈕狀態的具體實作模式，包括非同步操作期間的停用狀態與載入回饋。

• 提供根據內容可預測性選擇骨架屏與載入轉圈的明確決策樹。

• 與資料獲取程式庫及自訂 Hooks 整合，以維持乾淨的組件組合。

• 輸入：React 組件、查詢/變更 Hooks 與非同步資料操作。

• 輸出：針對資料生命週期事件（載入中、錯誤、空狀態、成功）的一致性且友善的 UI 回應。

• 最佳實踐：在嘗試渲染成功或載入指示器之前，請務必先驗證錯誤狀態。

• 約束：需要與現有的設計系統組件及標準化的變更處理包裝器保持一致。

• 用法：適用於程式碼審查、新功能架構搭建，或重構舊有 UI 邏輯以提升效能與錯誤覆蓋範圍時。