為依賴注入定義通用 Context 接口React 組合模式中的 state / actions / meta 三要素契約【免費下載鏈接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.項目地址: https://gitcode.com/gh_mirrors/crm48/crm導讀在構(gòu)建可擴展的 React 組件時UI 與狀態(tài)實現(xiàn)之間的耦合是導致組件難以復用、測試和維護的根源之一。本指南基于 Vercel 組合模式規(guī)則集位于 .agents/skills/vercel-composition-patterns/rules/state-context-interface.md展開講解如何為組件 Context 定義由state、actions、meta三個部分組成的通用接口generic interface使其成為任何 Provider 都可實現(xiàn)的契約——讓同一套 UI 組件能夠無縫對接完全不同的狀態(tài)實現(xiàn)本地useState、全局同步狀態(tài)、服務器狀態(tài)等。讀完本文你將掌握依賴注入式狀態(tài)管理的完整落地姿勢如何定義接口、如何讓 UI 只消費接口、如何用不同 Provider 實現(xiàn)同一接口以及如何突破視覺嵌套邊界共享狀態(tài)。為什么需要通用 Context 接口從耦合到可注入React 組合的核心難題在于狀態(tài)管理方案本地 state、全局 store、服務端同步與 UI 表現(xiàn)往往糾纏在一起。當組件內(nèi)部直接調(diào)用某個特定 Hook如useChannelComposerState時UI 就被鎖定在了單一實現(xiàn)上——換一種狀態(tài)來源就得重寫組件。規(guī)則文件給出的核心原則只有一句話Lift state, compose internals, make state dependency-injectable.提升狀態(tài)、組合內(nèi)部結(jié)構(gòu)、讓狀態(tài)可依賴注入。而實現(xiàn)這一原則的載體就是三段式通用 Context 接口組成部分職責典型內(nèi)容state只讀的當前狀態(tài)數(shù)據(jù)input、attachments、isSubmittingactions修改狀態(tài)或觸發(fā)副作用的函數(shù)集合update(updater)、submit()meta與 UI 生命周期相關的引用或元數(shù)據(jù)inputRef: React.RefObjectTextInput這套接口設計本身與狀態(tài)實現(xiàn)完全解耦Provider 決定狀態(tài)從哪來useState、Zustand、服務端同步UI 組件只看到統(tǒng)一的state / actions / meta形狀。從源碼結(jié)構(gòu)看該規(guī)則屬于 .agents/skills/vercel-composition-patterns 技能中狀態(tài)管理State Management, HIGH優(yōu)先級分類與state-lift-state狀態(tài)提升和state-decouple-implementation狀態(tài)與 UI 解耦共同構(gòu)成一套完整的狀態(tài)治理方案。反模式UI 與具體狀態(tài)實現(xiàn)緊耦合先看一個直觀的反面教材——UI 組件直接消費特定 Hookfunction ComposerInput() { // Tightly coupled to a specific hook const { input, setInput } useChannelComposerState() return TextInput value{input} onChangeText{setInput} / }這段代碼的問題在于ComposerInput依賴的是useChannelComposerState()這個具體實現(xiàn)而非抽象契約。一旦另一個場景比如轉(zhuǎn)發(fā)消息表單需要相同的輸入框 UI 但使用不同的狀態(tài)管理方式就必須復制組件或為其增加條件邏輯——這正是 boolean prop 泛濫、組件爆炸的起點。與之對比狀態(tài)管理規(guī)則中的姊妹文檔 state-decouple-implementation.md 明確指出Provider 組件應當是唯一知道狀態(tài)如何被管理的地方UI 組件只消費 Context 接口不關心狀態(tài)來自useState、Zustand 還是服務端同步。正模式定義三段式通用 Context 接口正確做法的第一步是定義一個任何 Provider 都能實現(xiàn)的通用接口// Define a GENERIC interface that any provider can implement interface ComposerState { input: string attachments: Attachment[] isSubmitting: boolean } interface ComposerActions { update: (updater: (state: ComposerState) ComposerState) void submit: () void } interface ComposerMeta { inputRef: React.RefObjectTextInput } interface ComposerContextValue { state: ComposerState actions: ComposerActions meta: ComposerMeta } const ComposerContext createContextComposerContextValue | null(null)幾個值得注意的設計細節(jié)actions.update使用函數(shù)式更新器簽名(state: ComposerState) ComposerState這與 ReactsetState的 updater 形式天然兼容——Provider 可以直接把setState透傳為update無需任何適配層meta專門承載 ref 等與渲染樹生命周期相關的對象避免把數(shù)據(jù)和DOM 引用混在同一個state里Context 的泛型參數(shù)帶| null默認值配合 React 19 的use()在消費端做空值兜底。UI 組件只消費接口不依賴實現(xiàn)定義好接口后UI 組件通過use(ComposerContext)讀取三要素function ComposerInput() { const { state, actions: { update }, meta, } use(ComposerContext) // This component works with ANY provider that implements the interface return ( TextInput ref{meta.inputRef} value{state.input} onChangeText{(text) update((s) ({ ...s, input: text }))} / ) }注意這里使用的是 React 19 的use()而不是useContext()。規(guī)則 react19-no-forwardref.md 說明了原因React 19 中use()取代useContext()且可以條件調(diào)用而useContext()不行。同一規(guī)則還指出 React 19 中ref已回歸為普通 prop不再需要forwardRef包裝。當前項目apps/app的移動端導航 mobile-nav.tsx正是采用createContextMobileNavContextValue | null(null)這種空值兜底模式與本規(guī)則的接口定義風格一致。不同 Provider 實現(xiàn)同一接口通用接口的價值在于一套 UI多個 Provider。規(guī)則文件給出了兩個典型實現(xiàn)// Provider A: Local state for ephemeral forms function ForwardMessageProvider({ children }: { children: React.ReactNode }) { const [state, setState] useState(initialState) const inputRef useRef(null) const submit useForwardMessage() return ( ComposerContext value{{ state, actions: { update: setState, submit }, meta: { inputRef }, }} {children} /ComposerContext ) } // Provider B: Global synced state for channels function ChannelProvider({ channelId, children }: Props) { const { state, update, submit } useGlobalChannel(channelId) const inputRef useRef(null) return ( ComposerContext value{{ state, actions: { update, submit }, meta: { inputRef }, }} {children} /ComposerContext ) }Provider A 用useState管理臨時表單的本地狀態(tài)Provider B 用useGlobalChannel消費頻道的全局同步狀態(tài)。兩者實現(xiàn)的接口完全相同——value的形狀一模一樣——因此下面的 UI 組合可以不加任何修改地復用在兩種場景// Works with ForwardMessageProvider (local state) ForwardMessageProvider Composer.Frame Composer.Input / Composer.Submit / /Composer.Frame /ForwardMessageProvider // Works with ChannelProvider (global synced state) ChannelProvider channelIdabc Composer.Frame Composer.Input / Composer.Submit / /Composer.Frame /ChannelProvider這正是組合優(yōu)于配置Composition over configuration原則的體現(xiàn)——規(guī)則集 README.md 中列出的四大核心原則之一State in providers, not trapped in components狀態(tài)放在 Provider 中而不是困在組件里。同時Provider 作為唯一知道狀態(tài)如何管理的邊界也天然滿足state-decouple-implementation規(guī)則換掉 Provider 內(nèi)部的useState換成 Zustand 或服務端訂閱UI 一行都不用改。突破視覺嵌套Provider 邊界才是狀態(tài)共享的邊界通用 Context 接口帶來的另一個關鍵能力是共享狀態(tài)的組件不必在視覺上互相嵌套。規(guī)則明確指出The provider boundary is what matters—not the visual nesting.組件只要處于同一個 Provider 內(nèi)就可以讀取和修改狀態(tài)無論它在 DOM 樹中的視覺位置在哪里?？催@個轉(zhuǎn)發(fā)消息對話框的完整示例function ForwardMessageDialog() { return ( ForwardMessageProvider Dialog {/* The composer UI */} Composer.Frame Composer.Input placeholderAdd a message, if youd like. / Composer.Footer Composer.Formatting / Composer.Emojis / /Composer.Footer /Composer.Frame {/* Custom UI OUTSIDE the composer, but INSIDE the provider */} MessagePreview / {/* Actions at the bottom of the dialog */} DialogActions CancelButton / ForwardButton / /DialogActions /Dialog /ForwardMessageProvider ) } // This button lives OUTSIDE Composer.Frame but can still submit based on its context! function ForwardButton() { const { actions: { submit }, } use(ComposerContext) return Button onPress{submit}Forward/Button } // This preview lives OUTSIDE Composer.Frame but can read composers state! function MessagePreview() { const { state } use(ComposerContext) return Preview message{state.input} attachments{state.attachments} / }ForwardButton和MessagePreview都不在Composer.Frame的視覺框內(nèi)卻能通過use(ComposerContext)訪問submit動作和state.input。這是把狀態(tài)提升到 Provider帶來的直接紅利不需要 prop drilling不需要用 ref 在提交時偷讀狀態(tài)更不需要 useEffect 在每次變更時向上同步。這三種被規(guī)則明確否決的替代方案詳見姊妹規(guī)則 state-lift-state.md值得引以為戒反模式問題狀態(tài)困在組件內(nèi)部兄弟組件無法訪問必須 prop drilling 或引入 ref用useEffect把狀態(tài)向上同步每次變更觸發(fā)額外渲染與副作用脆弱易錯提交時從 ref 讀取當前狀態(tài)狀態(tài)與 UI 脫節(jié)時序不可靠正確解法始終是狀態(tài)提升到 Provider消費方通過通用接口訪問。正如規(guī)則文件結(jié)尾的總結(jié)The UI is reusable bits you compose together. The state is dependency-injected by the provider. Swap the provider, keep the UI.UI 是可復用的組合零件狀態(tài)由 Provider 依賴注入換 ProviderUI 不動。與組合模式家族的協(xié)同從接口到完整架構(gòu)state-context-interface并非孤立規(guī)則它是整個組合模式體系的一環(huán)。結(jié)合 .agents/skills/vercel-composition-patterns 的規(guī)則目錄結(jié)構(gòu)可以看到它與相鄰規(guī)則的協(xié)同關系state-lift-state.md狀態(tài)提升——解決狀態(tài)放哪移入獨立 Provider讓兄弟組件無需 prop drilling 即可訪問state-context-interface.md通用接口本文——解決接口長什么樣state / actions / meta三段式契約讓任意 Provider 可注入state-decouple-implementation.md實現(xiàn)解耦——解決誰管理實現(xiàn)只有 Provider 知道狀態(tài)來自useState還是全局同步architecture-compound-components.md復合組件——解決UI 怎么拼以Composer.Provider / Composer.Frame / Composer.Input / Composer.Submit形式導出復合組件每個子組件通過共享 Context 獲取狀態(tài)消費者顯式組合所需零件無隱藏條件分支。四條規(guī)則合在一起構(gòu)成完整的閉環(huán)狀態(tài)提升進 Provider → 通過通用接口注入 → UI 只依賴接口 → 以復合組件形式自由組合。當多個場景復用同一組件結(jié)構(gòu)時依賴注入使得不同 Provider 可以同時服務同一套 UI互不干擾。何時使用適用場景與判斷標準根據(jù) SKILL.md 的觸發(fā)條件本模式適用于以下場景重構(gòu) boolean prop 泛濫的組件——與其給Composer加showAttachments、showFormatting、showEmojis等開關不如讓消費者用復合組件顯式組合所需零件構(gòu)建可復用組件庫——需要為不同宿主環(huán)境表單、頻道、對話框提供一致 UI 接口設計靈活的組件 API——讓state成為可注入依賴而非組件內(nèi)部秘密審查組件架構(gòu)——檢查 UI 是否泄漏了狀態(tài)實現(xiàn)細節(jié)。需要說明的適用前提是示例代碼中使用的use()React 19 新 API與ref作為普通 prop 的寫法僅適用于 React 19如果項目仍停留在 React 18 及以下需將use(ComposerContext)換回useContext(ComposerContext)并保留forwardRef包裝見 react19-no-forwardref.md 的兼容性說明。小結(jié)為 Context 定義通用的state / actions / meta三段式接口是讓 React 組件從實現(xiàn)綁定走向契約驅(qū)動的關鍵一步接口即契約ComposerContextValue是任何 Provider 都能實現(xiàn)的協(xié)議UI 組件只依賴協(xié)議不依賴實現(xiàn)Provider 即注入點本地useState與全局同步狀態(tài)可以無縫互換換 Provider 不動 UI邊界即共享域Provider 邊界而非視覺嵌套決定狀態(tài)可達性讓對話框底部按鈕、消息預覽等外圍 UI 也能安全讀寫核心狀態(tài)。這套模式讓代碼庫對人和 AI Agent 都更易維護——這正是本規(guī)則集vercel-composition-patternsVercel 出品MIT 協(xié)議被設計用來解決的問題。遵循它你的組件將獲得可插拔狀態(tài)、可組合 UI、可替換實現(xiàn)三項長期收益。參考與延伸閱讀規(guī)則原文state-context-interface.md狀態(tài)提升state-lift-state.md實現(xiàn)解耦state-decouple-implementation.md復合組件architecture-compound-components.mdReact 19 API 說明react19-no-forwardref.md規(guī)則集總覽與核心原則README.md、SKILL.md倉庫內(nèi)同風格 Context 實現(xiàn)參考mobile-nav.tsx【免費下載鏈接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.項目地址: https://gitcode.com/gh_mirrors/crm48/crm創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 為依賴注入定義通用 Context 接口：React 組合模式中的 state / actions / meta 三要素契約
為依賴注入定義通用 Context 接口React 組合模式中的 state / actions / meta 三要素契約【免費下載鏈接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.項目地址: https://gitcode.com/gh_mirrors/crm48/crm導讀在構(gòu)建可擴展的 React 組件時UI 與狀態(tài)實現(xiàn)之間的耦合是導致組件難以復用、測試和維護的根源之一。本指南基于 Vercel 組合模式規(guī)則集位于 .agents/skills/vercel-composition-patterns/rules/state-context-interface.md展開講解如何為組件 Context 定義由state、actions、meta三個部分組成的通用接口generic interface使其成為任何 Provider 都可實現(xiàn)的契約——讓同一套 UI 組件能夠無縫對接完全不同的狀態(tài)實現(xiàn)本地useState、全局同步狀態(tài)、服務器狀態(tài)等。讀完本文你將掌握依賴注入式狀態(tài)管理的完整落地姿勢如何定義接口、如何讓 UI 只消費接口、如何用不同 Provider 實現(xiàn)同一接口以及如何突破視覺嵌套邊界共享狀態(tài)。為什么需要通用 Context 接口從耦合到可注入React 組合的核心難題在于狀態(tài)管理方案本地 state、全局 store、服務端同步與 UI 表現(xiàn)往往糾纏在一起。當組件內(nèi)部直接調(diào)用某個特定 Hook如useChannelComposerState時UI 就被鎖定在了單一實現(xiàn)上——換一種狀態(tài)來源就得重寫組件。規(guī)則文件給出的核心原則只有一句話Lift state, compose internals, make state dependency-injectable.提升狀態(tài)、組合內(nèi)部結(jié)構(gòu)、讓狀態(tài)可依賴注入。而實現(xiàn)這一原則的載體就是三段式通用 Context 接口組成部分職責典型內(nèi)容state只讀的當前狀態(tài)數(shù)據(jù)input、attachments、isSubmittingactions修改狀態(tài)或觸發(fā)副作用的函數(shù)集合update(updater)、submit()meta與 UI 生命周期相關的引用或元數(shù)據(jù)inputRef: React.RefObjectTextInput這套接口設計本身與狀態(tài)實現(xiàn)完全解耦Provider 決定狀態(tài)從哪來useState、Zustand、服務端同步UI 組件只看到統(tǒng)一的state / actions / meta形狀。從源碼結(jié)構(gòu)看該規(guī)則屬于 .agents/skills/vercel-composition-patterns 技能中狀態(tài)管理State Management, HIGH優(yōu)先級分類與state-lift-state狀態(tài)提升和state-decouple-implementation狀態(tài)與 UI 解耦共同構(gòu)成一套完整的狀態(tài)治理方案。反模式UI 與具體狀態(tài)實現(xiàn)緊耦合先看一個直觀的反面教材——UI 組件直接消費特定 Hookfunction ComposerInput() { // Tightly coupled to a specific hook const { input, setInput } useChannelComposerState() return TextInput value{input} onChangeText{setInput} / }這段代碼的問題在于ComposerInput依賴的是useChannelComposerState()這個具體實現(xiàn)而非抽象契約。一旦另一個場景比如轉(zhuǎn)發(fā)消息表單需要相同的輸入框 UI 但使用不同的狀態(tài)管理方式就必須復制組件或為其增加條件邏輯——這正是 boolean prop 泛濫、組件爆炸的起點。與之對比狀態(tài)管理規(guī)則中的姊妹文檔 state-decouple-implementation.md 明確指出Provider 組件應當是唯一知道狀態(tài)如何被管理的地方UI 組件只消費 Context 接口不關心狀態(tài)來自useState、Zustand 還是服務端同步。正模式定義三段式通用 Context 接口正確做法的第一步是定義一個任何 Provider 都能實現(xiàn)的通用接口// Define a GENERIC interface that any provider can implement interface ComposerState { input: string attachments: Attachment[] isSubmitting: boolean } interface ComposerActions { update: (updater: (state: ComposerState) ComposerState) void submit: () void } interface ComposerMeta { inputRef: React.RefObjectTextInput } interface ComposerContextValue { state: ComposerState actions: ComposerActions meta: ComposerMeta } const ComposerContext createContextComposerContextValue | null(null)幾個值得注意的設計細節(jié)actions.update使用函數(shù)式更新器簽名(state: ComposerState) ComposerState這與 ReactsetState的 updater 形式天然兼容——Provider 可以直接把setState透傳為update無需任何適配層meta專門承載 ref 等與渲染樹生命周期相關的對象避免把數(shù)據(jù)和DOM 引用混在同一個state里Context 的泛型參數(shù)帶| null默認值配合 React 19 的use()在消費端做空值兜底。UI 組件只消費接口不依賴實現(xiàn)定義好接口后UI 組件通過use(ComposerContext)讀取三要素function ComposerInput() { const { state, actions: { update }, meta, } use(ComposerContext) // This component works with ANY provider that implements the interface return ( TextInput ref{meta.inputRef} value{state.input} onChangeText{(text) update((s) ({ ...s, input: text }))} / ) }注意這里使用的是 React 19 的use()而不是useContext()。規(guī)則 react19-no-forwardref.md 說明了原因React 19 中use()取代useContext()且可以條件調(diào)用而useContext()不行。同一規(guī)則還指出 React 19 中ref已回歸為普通 prop不再需要forwardRef包裝。當前項目apps/app的移動端導航 mobile-nav.tsx正是采用createContextMobileNavContextValue | null(null)這種空值兜底模式與本規(guī)則的接口定義風格一致。不同 Provider 實現(xiàn)同一接口通用接口的價值在于一套 UI多個 Provider。規(guī)則文件給出了兩個典型實現(xiàn)// Provider A: Local state for ephemeral forms function ForwardMessageProvider({ children }: { children: React.ReactNode }) { const [state, setState] useState(initialState) const inputRef useRef(null) const submit useForwardMessage() return ( ComposerContext value{{ state, actions: { update: setState, submit }, meta: { inputRef }, }} {children} /ComposerContext ) } // Provider B: Global synced state for channels function ChannelProvider({ channelId, children }: Props) { const { state, update, submit } useGlobalChannel(channelId) const inputRef useRef(null) return ( ComposerContext value{{ state, actions: { update, submit }, meta: { inputRef }, }} {children} /ComposerContext ) }Provider A 用useState管理臨時表單的本地狀態(tài)Provider B 用useGlobalChannel消費頻道的全局同步狀態(tài)。兩者實現(xiàn)的接口完全相同——value的形狀一模一樣——因此下面的 UI 組合可以不加任何修改地復用在兩種場景// Works with ForwardMessageProvider (local state) ForwardMessageProvider Composer.Frame Composer.Input / Composer.Submit / /Composer.Frame /ForwardMessageProvider // Works with ChannelProvider (global synced state) ChannelProvider channelIdabc Composer.Frame Composer.Input / Composer.Submit / /Composer.Frame /ChannelProvider這正是組合優(yōu)于配置Composition over configuration原則的體現(xiàn)——規(guī)則集 README.md 中列出的四大核心原則之一State in providers, not trapped in components狀態(tài)放在 Provider 中而不是困在組件里。同時Provider 作為唯一知道狀態(tài)如何管理的邊界也天然滿足state-decouple-implementation規(guī)則換掉 Provider 內(nèi)部的useState換成 Zustand 或服務端訂閱UI 一行都不用改。突破視覺嵌套Provider 邊界才是狀態(tài)共享的邊界通用 Context 接口帶來的另一個關鍵能力是共享狀態(tài)的組件不必在視覺上互相嵌套。規(guī)則明確指出The provider boundary is what matters—not the visual nesting.組件只要處于同一個 Provider 內(nèi)就可以讀取和修改狀態(tài)無論它在 DOM 樹中的視覺位置在哪里?？催@個轉(zhuǎn)發(fā)消息對話框的完整示例function ForwardMessageDialog() { return ( ForwardMessageProvider Dialog {/* The composer UI */} Composer.Frame Composer.Input placeholderAdd a message, if youd like. / Composer.Footer Composer.Formatting / Composer.Emojis / /Composer.Footer /Composer.Frame {/* Custom UI OUTSIDE the composer, but INSIDE the provider */} MessagePreview / {/* Actions at the bottom of the dialog */} DialogActions CancelButton / ForwardButton / /DialogActions /Dialog /ForwardMessageProvider ) } // This button lives OUTSIDE Composer.Frame but can still submit based on its context! function ForwardButton() { const { actions: { submit }, } use(ComposerContext) return Button onPress{submit}Forward/Button } // This preview lives OUTSIDE Composer.Frame but can read composers state! function MessagePreview() { const { state } use(ComposerContext) return Preview message{state.input} attachments{state.attachments} / }ForwardButton和MessagePreview都不在Composer.Frame的視覺框內(nèi)卻能通過use(ComposerContext)訪問submit動作和state.input。這是把狀態(tài)提升到 Provider帶來的直接紅利不需要 prop drilling不需要用 ref 在提交時偷讀狀態(tài)更不需要 useEffect 在每次變更時向上同步。這三種被規(guī)則明確否決的替代方案詳見姊妹規(guī)則 state-lift-state.md值得引以為戒反模式問題狀態(tài)困在組件內(nèi)部兄弟組件無法訪問必須 prop drilling 或引入 ref用useEffect把狀態(tài)向上同步每次變更觸發(fā)額外渲染與副作用脆弱易錯提交時從 ref 讀取當前狀態(tài)狀態(tài)與 UI 脫節(jié)時序不可靠正確解法始終是狀態(tài)提升到 Provider消費方通過通用接口訪問。正如規(guī)則文件結(jié)尾的總結(jié)The UI is reusable bits you compose together. The state is dependency-injected by the provider. Swap the provider, keep the UI.UI 是可復用的組合零件狀態(tài)由 Provider 依賴注入換 ProviderUI 不動。與組合模式家族的協(xié)同從接口到完整架構(gòu)state-context-interface并非孤立規(guī)則它是整個組合模式體系的一環(huán)。結(jié)合 .agents/skills/vercel-composition-patterns 的規(guī)則目錄結(jié)構(gòu)可以看到它與相鄰規(guī)則的協(xié)同關系state-lift-state.md狀態(tài)提升——解決狀態(tài)放哪移入獨立 Provider讓兄弟組件無需 prop drilling 即可訪問state-context-interface.md通用接口本文——解決接口長什么樣state / actions / meta三段式契約讓任意 Provider 可注入state-decouple-implementation.md實現(xiàn)解耦——解決誰管理實現(xiàn)只有 Provider 知道狀態(tài)來自useState還是全局同步architecture-compound-components.md復合組件——解決UI 怎么拼以Composer.Provider / Composer.Frame / Composer.Input / Composer.Submit形式導出復合組件每個子組件通過共享 Context 獲取狀態(tài)消費者顯式組合所需零件無隱藏條件分支。四條規(guī)則合在一起構(gòu)成完整的閉環(huán)狀態(tài)提升進 Provider → 通過通用接口注入 → UI 只依賴接口 → 以復合組件形式自由組合。當多個場景復用同一組件結(jié)構(gòu)時依賴注入使得不同 Provider 可以同時服務同一套 UI互不干擾。何時使用適用場景與判斷標準根據(jù) SKILL.md 的觸發(fā)條件本模式適用于以下場景重構(gòu) boolean prop 泛濫的組件——與其給Composer加showAttachments、showFormatting、showEmojis等開關不如讓消費者用復合組件顯式組合所需零件構(gòu)建可復用組件庫——需要為不同宿主環(huán)境表單、頻道、對話框提供一致 UI 接口設計靈活的組件 API——讓state成為可注入依賴而非組件內(nèi)部秘密審查組件架構(gòu)——檢查 UI 是否泄漏了狀態(tài)實現(xiàn)細節(jié)。需要說明的適用前提是示例代碼中使用的use()React 19 新 API與ref作為普通 prop 的寫法僅適用于 React 19如果項目仍停留在 React 18 及以下需將use(ComposerContext)換回useContext(ComposerContext)并保留forwardRef包裝見 react19-no-forwardref.md 的兼容性說明。小結(jié)為 Context 定義通用的state / actions / meta三段式接口是讓 React 組件從實現(xiàn)綁定走向契約驅(qū)動的關鍵一步接口即契約ComposerContextValue是任何 Provider 都能實現(xiàn)的協(xié)議UI 組件只依賴協(xié)議不依賴實現(xiàn)Provider 即注入點本地useState與全局同步狀態(tài)可以無縫互換換 Provider 不動 UI邊界即共享域Provider 邊界而非視覺嵌套決定狀態(tài)可達性讓對話框底部按鈕、消息預覽等外圍 UI 也能安全讀寫核心狀態(tài)。這套模式讓代碼庫對人和 AI Agent 都更易維護——這正是本規(guī)則集vercel-composition-patternsVercel 出品MIT 協(xié)議被設計用來解決的問題。遵循它你的組件將獲得可插拔狀態(tài)、可組合 UI、可替換實現(xiàn)三項長期收益。參考與延伸閱讀規(guī)則原文state-context-interface.md狀態(tài)提升state-lift-state.md實現(xiàn)解耦state-decouple-implementation.md復合組件architecture-compound-components.mdReact 19 API 說明react19-no-forwardref.md規(guī)則集總覽與核心原則README.md、SKILL.md倉庫內(nèi)同風格 Context 實現(xiàn)參考mobile-nav.tsx【免費下載鏈接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.項目地址: https://gitcode.com/gh_mirrors/crm48/crm創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考