徹底改變我 React 開發方式的組件模式
作者：dev
本文將通過具體實例，帶你了解這一革命性的 React 組件模式，并教你如何立即將它應用到自己的項目中。?
你是否曾經遇到這樣的問題：同一個 React 組件在不同場景下需要呈現完全不同的布局或樣式？最近我發現了一種能徹底解決這個問題的組件模式：復合組件（Compound Components）。
本文將通過具體實例，帶你了解這一革命性的 React 組件模式，并教你如何立即將它應用到自己的項目中。
場景：組件相似但上下文不同
設想你在做一個通訊錄管理應用，你會遇到：
- 在單獨的頁面編輯聯系人信息。
- 在模態框（Modal）中編輯聯系人信息。
盡管這兩種界面擁有類似的輸入框、保存/取消按鈕和標題，但布局卻完全不同：
- 頁面模式：整頁布局，標題和按鈕位于頂部區域。
- 模態框模式：緊湊布局，需遵循模態框的樣式限制。
過去，你可能會選擇：
- 創建兩個單獨的組件，產生大量重復代碼。
- 創建一個復雜的組件，根據傳入的屬性條件渲染。
但以上方式都存在缺陷，代碼難以維護且擴展性差。
那么，有沒有更好的方式？讓我們來看如何用 復合組件模式 優雅地解決它。
解決方案：復合組件（Compound Components）模式
復合組件模式 是一種組合式的組件設計方法。你會創建一個父組件管理狀態和行為，并暴露一系列子組件用于渲染不同的 UI 部分。
你可以將它理解為類似于 HTML 的 <select> 和 <option>，各個組件共同協作，但具體排列方式可以自由組合。
實際代碼使用方式如下：
編輯頁面組件示例：
// EditContactPage.jsx
function EditContactPage({ contactId }) {
return (
<PageLayout>
<EditContact.Root contactId={contactId}>
<div className="header">
<EditContact.Title />
<EditContact.SubmitButtons />
</div>
<div className="form-container">
<EditContact.FormInputs />
</div>
</EditContact.Root>
</PageLayout>
);
}模態框組件示例：
// ContactModal.jsx
function ContactModal({ contactId, onClose }) {
return (
<Modal
onClose={onClose}
title={<EditContact.Title />}
footer={<EditContact.SubmitButtons />}
>
<EditContact.Root contactId={contactId}>
<EditContact.FormInputs />
</EditContact.Root>
</Modal>
);
}上面代碼清晰地展示了這一模式的優雅之處：
同樣的邏輯組件，只需稍微調整布局即可靈活地適應不同場景。
如何實現復合組件模式？
實現復合組件的核心要素：
- 使用 Context 共享狀態。
- 父組件管理邏輯并暴露給子組件。
- 子組件通過 Context 消費共享狀態。
具體實現代碼：
步驟 1: 創建 Context
import { createContext, useContext, useState, useEffect } from 'react';
const EditContactContext = createContext(null);
function useEditContactContext() {
const context = useContext(EditContactContext);
if (!context) {
throw new Error("子組件必須位于 EditContact.Root 內！");
}
return context;
}步驟 2: 創建父組件 Root 管理狀態
function Root({ contactId, children }) {
const [formData, setFormData] = useState({
name: '',
email: '',
phone: ''
});
const [error, setError] = useState(null);
const [loading, setLoading] = useState(false);
// 獲取聯系人信息
const { data: contact } = useGetContact(contactId);
// 保存聯系人信息
const saveContact = useSaveContact({
onSuccess: () => {/*成功處理邏輯*/},
onError: (err) => setError(err.message)
});
useEffect(() => {
if (contact) {
setFormData(contact);
}
}, [contact]);
const handleSubmit = async () => {
setLoading(true);
try {
await saveContact.mutateAsync({ id: contactId, ...formData });
} finally {
setLoading(false);
}
};
const contextValue = {
contact,
formData,
setFormData,
error,
loading,
handleSubmit
};
return (
<EditContactContext.Provider value={contextValue}>
{children}
</EditContactContext.Provider>
);
}步驟 3: 創建子組件消費 Context
標題組件：
function Title() {
const { contact } = useEditContactContext();
return <>{contact ? `編輯 ${contact.name}` : "創建聯系人"}</>;
}提交按鈕組件：
function SubmitButtons() {
const { handleSubmit, loading } = useEditContactContext();
return (
<div>
<button onClick={handleSubmit} disabled={loading}>
{loading ? '保存中...' : '保存'}
</button>
<button>取消</button>
</div>
);
}表單輸入組件：
function FormInputs() {
const { formData, setFormData, error } = useEditContactContext();
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
return (
<form>
{error && <div className="error">{error}</div>}
<input name="name" value={formData.name} onChange={handleChange} placeholder="姓名" />
<input name="email" value={formData.email} onChange={handleChange} placeholder="郵箱" />
<input name="phone" value={formData.phone} onChange={handleChange} placeholder="電話" />
</form>
);
}步驟 4: 導出復合組件
const EditContact = {
Root,
Title,
SubmitButtons,
FormInputs
};
export default EditContact;為什么這種模式值得推薦？
我在實際使用后，感受到它強大的優勢：
- 靈活布局：自由組合子組件，實現不同布局。
- 邏輯復用：核心邏輯統一管理，避免重復。
- 高可讀性：JSX 明確展示組件結構，更易理解。
- 維護性強：修改邏輯只需改一處。
- 社區認可：很多流行組件庫（如 Chakra UI、Radix UI、shadcn/ui）廣泛使用。
何時使用這種模式？
以下場景適合使用復合組件模式：
- 同一組件需適應不同布局。
- 復雜狀態需跨多個子組件共享。
- 開發組件庫或設計系統，需提供布局組合靈活性。
總結要點
- 復合組件讓組件布局更靈活。
- 使用 React Context 管理共享狀態。
- 明確的邏輯與布局分離，提升可維護性。
- 尤其適合需適應不同場景布局的組件。
下次再遇到需要實現靈活布局的 React 組件時，不妨嘗試一下復合組件模式。或許你也會像我一樣，從此徹底改變 React 開發的方式。
責任編輯：姜華
來源：
大遷世界
