React 組合模式
用於建構靈活、可維護 React 元件的組合模式。避免布林屬性泛濫,改用複合元件、狀態提升與內部組合。這些模式有助於讓人類與 AI 代理在擴展程式碼庫時更輕鬆地協作。
何時套用
請在以下情況參考這些指南:
- 重構含有大量布林屬性的元件
- 建構可重複使用的元件庫
- 設計靈活的元件 API
- 審查元件架構
- 處理複合元件或 Context 提供者
依優先級分類的規則
| 優先級 | 類別 | 影響 | 前綴 |
|---|---|---|---|
| 1 | 元件架構 | 高 | architecture- |
| 2 | 狀態管理 | 中 | state- |
| 3 | 實作模式 | 中 | patterns- |
| 4 | React 19 API | 中 | react19- |
快速參考
1. 元件架構(高優先級)
architecture-avoid-boolean-props- 不要使用布林屬性來自訂行為,改用組合architecture-compound-components- 透過共享 Context 建構複雜元件
2. 狀態管理(中優先級)
state-decouple-implementation- Provider 是唯一知道狀態如何管理的地方state-context-interface- 使用 state、actions、meta 定義通用介面以支援依賴注入state-lift-state- 將狀態移至 provider 元件中,以便兄弟元件存取
3. 實作模式(中優先級)
patterns-explicit-variants- 建立明確的變體元件,取代布林模式patterns-children-over-render-props- 使用 children 進行組合,而非 renderX props
4. React 19 API(中優先級)
**⚠️ 僅限 React 19+。**若使用 React 18 或更早版本,請跳過此區。
react19-no-forwardref- 不要使用forwardRef;改用use()取代useContext()
如何使用
請閱讀個別規則檔案以取得詳細說明與程式碼範例:
rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md
每個規則檔案包含:
- 為何重要的簡短說明
- 錯誤的程式碼範例與解釋
- 正確的程式碼範例與解釋
- 額外的背景資訊與參考資料
完整編譯文件
如需包含所有規則展開的完整指南,請參閱:AGENTS.md