徹底改變我 React 開(kāi)發(fā)方式的組件模式
作者：dev
本文將通過(guò)具體實(shí)例，帶你了解這一革命性的 React 組件模式，并教你如何立即將它應(yīng)用到自己的項(xiàng)目中。?
你是否曾經(jīng)遇到這樣的問(wèn)題：同一個(gè) React 組件在不同場(chǎng)景下需要呈現(xiàn)完全不同的布局或樣式？最近我發(fā)現(xiàn)了一種能徹底解決這個(gè)問(wèn)題的組件模式：復(fù)合組件（Compound Components）。
本文將通過(guò)具體實(shí)例，帶你了解這一革命性的 React 組件模式，并教你如何立即將它應(yīng)用到自己的項(xiàng)目中。
場(chǎng)景：組件相似但上下文不同
設(shè)想你在做一個(gè)通訊錄管理應(yīng)用，你會(huì)遇到：
- 在單獨(dú)的頁(yè)面編輯聯(lián)系人信息。
- 在模態(tài)框（Modal）中編輯聯(lián)系人信息。
盡管這兩種界面擁有類似的輸入框、保存/取消按鈕和標(biāo)題，但布局卻完全不同：
- 頁(yè)面模式：整頁(yè)布局，標(biāo)題和按鈕位于頂部區(qū)域。
- 模態(tài)框模式：緊湊布局，需遵循模態(tài)框的樣式限制。
過(guò)去，你可能會(huì)選擇：
- 創(chuàng)建兩個(gè)單獨(dú)的組件，產(chǎn)生大量重復(fù)代碼。
- 創(chuàng)建一個(gè)復(fù)雜的組件，根據(jù)傳入的屬性條件渲染。
但以上方式都存在缺陷，代碼難以維護(hù)且擴(kuò)展性差。
那么，有沒(méi)有更好的方式？讓我們來(lái)看如何用 復(fù)合組件模式 優(yōu)雅地解決它。
解決方案：復(fù)合組件（Compound Components）模式
復(fù)合組件模式 是一種組合式的組件設(shè)計(jì)方法。你會(huì)創(chuàng)建一個(gè)父組件管理狀態(tài)和行為，并暴露一系列子組件用于渲染不同的 UI 部分。
你可以將它理解為類似于 HTML 的 <select> 和 <option>，各個(gè)組件共同協(xié)作，但具體排列方式可以自由組合。
實(shí)際代碼使用方式如下：
編輯頁(yè)面組件示例：
// 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>
);
}模態(tài)框組件示例：
// 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>
);
}上面代碼清晰地展示了這一模式的優(yōu)雅之處：
同樣的邏輯組件，只需稍微調(diào)整布局即可靈活地適應(yīng)不同場(chǎng)景。
如何實(shí)現(xiàn)復(fù)合組件模式？
實(shí)現(xiàn)復(fù)合組件的核心要素：
- 使用 Context 共享狀態(tài)。
- 父組件管理邏輯并暴露給子組件。
- 子組件通過(guò) Context 消費(fèi)共享狀態(tài)。
具體實(shí)現(xiàn)代碼：
步驟 1: 創(chuàng)建 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 內(nèi)！");
}
return context;
}步驟 2: 創(chuàng)建父組件 Root 管理狀態(tài)
function Root({ contactId, children }) {
const [formData, setFormData] = useState({
name: '',
email: '',
phone: ''
});
const [error, setError] = useState(null);
const [loading, setLoading] = useState(false);
// 獲取聯(lián)系人信息
const { data: contact } = useGetContact(contactId);
// 保存聯(lián)系人信息
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: 創(chuàng)建子組件消費(fèi) Context
標(biāo)題組件：
function Title() {
const { contact } = useEditContactContext();
return <>{contact ? `編輯 ${contact.name}` : "創(chuàng)建聯(lián)系人"}</>;
}提交按鈕組件：
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: 導(dǎo)出復(fù)合組件
const EditContact = {
Root,
Title,
SubmitButtons,
FormInputs
};
export default EditContact;為什么這種模式值得推薦？
我在實(shí)際使用后，感受到它強(qiáng)大的優(yōu)勢(shì)：
- 靈活布局：自由組合子組件，實(shí)現(xiàn)不同布局。
- 邏輯復(fù)用：核心邏輯統(tǒng)一管理，避免重復(fù)。
- 高可讀性：JSX 明確展示組件結(jié)構(gòu)，更易理解。
- 維護(hù)性強(qiáng)：修改邏輯只需改一處。
- 社區(qū)認(rèn)可：很多流行組件庫(kù)（如 Chakra UI、Radix UI、shadcn/ui）廣泛使用。
何時(shí)使用這種模式？
以下場(chǎng)景適合使用復(fù)合組件模式：
- 同一組件需適應(yīng)不同布局。
- 復(fù)雜狀態(tài)需跨多個(gè)子組件共享。
- 開(kāi)發(fā)組件庫(kù)或設(shè)計(jì)系統(tǒng)，需提供布局組合靈活性。
總結(jié)要點(diǎn)
- 復(fù)合組件讓組件布局更靈活。
- 使用 React Context 管理共享狀態(tài)。
- 明確的邏輯與布局分離，提升可維護(hù)性。
- 尤其適合需適應(yīng)不同場(chǎng)景布局的組件。
下次再遇到需要實(shí)現(xiàn)靈活布局的 React 組件時(shí)，不妨嘗試一下復(fù)合組件模式。或許你也會(huì)像我一樣，從此徹底改變 React 開(kāi)發(fā)的方式。
責(zé)任編輯：姜華
來(lái)源：
大遷世界
