React 組合模式 是做什麼的?
用於構建靈活、可維護 React 元件的組合模式。避免布林 props 泛濫,採用複合元件、提升狀態和組合內部實作。這些模式使程式碼庫在擴展時,對人類和 AI 代理都更易於處理。
何時套用
請在以下情況參考這些指南:
- 重構具有大量布林 props 的元件
- 構建可重複使用的元件庫
- 設計靈活的元件 API
- 審查元件架構
- 處理複合元件或 Context Provider
按優先級分類的規則
| 優先級 | 類別 | 影響力 | 前綴 |
|---|---|---|---|
| 1 | 元件架構 | 高 | architecture- |
| 2 | 狀態管理 | 中 | state- |
| 3 | 實作模式 | 中 | patterns- |
| 4 | React 19 API | 中 | react19- |
快速參考
1. 元件架構 (高優先級)
architecture-avoid-boolean-props- 不要添加布林 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