淺析五種 React 組件設計模式
作者：七彩
復合組件模式是一種通過將多個簡單組件組合在一起創(chuàng)建更復雜組件的方法。這種模式使得組件的邏輯分離，每個簡單組件負責特定的功能。通過復合組件，可以輕松構建可復用的、功能完備的組件。
作為一名 React 開發(fā)者，你可能會面臨下面幾個問題：
- 如何構建一個高復用度性的組件，使其適應不同的業(yè)務場景？
- 如何構建一個具有簡單 API的組件，使其易于使用？
- 如何構建一個在 UI 和功能方面具有可擴展性的組件？
為解決上述問題，下面介紹五種 React 組件設計模式，并對比它們的優(yōu)缺點。
1. 復合組件模式
復合組件模式是一種通過將多個簡單組件組合在一起創(chuàng)建更復雜組件的方法。這種模式使得組件的邏輯分離，每個簡單組件負責特定的功能。通過復合組件，可以輕松構建可復用的、功能完備的組件。
如果想要設計一個定制化程度高，API方便理解的組件，可以考慮這個模式，這種模式不會出現多層Props傳遞的情況。
import React, { useState } from 'react';
// 基礎按紐組件
const Button = ({ label, onClick }) => (
<button onClick={onClick}>{label}</button>
);
// 基礎文本組件
const TextBox = ({ value, onChange }) => (
<input type="text" value={value} onChange={onChange} />
);
// 復合組件
const LoginPanel = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleLogin = () => {
// 實現登錄邏輯
console.log(`Logging in with ${username} and ${password}`);
};
return (
<div className="login-panel">
<TextBox value={username} onChange={(e) => setUsername(e.target.value)} />
<TextBox value={password} onChange={(e) => setPassword(e.target.value)} />
<Button label="Login" onClick={handleLogin} />
</div>
);
};
// 使用示例
const App = () => {
return (
<LoginPanel />
);
};
export default App;在這個例子中，LoginPanel 是一個復合組件，它包含了兩個基本組件 TextBox 和一個帶有登錄邏輯的 Button。
優(yōu)點：
- API 復雜度降低： 避免將Props全部塞入一個容器組件中，而是直接將Props傳遞給相對應的子組件。
- 高度可復用性： 基礎組件可以在多個場景中重復使用。
- 邏輯分離： 每個基礎組件專注于一項任務。
- 組件數量增多： 隨著組件層級的增加，將會增加JSX的行數，并且代碼可能變得復雜。
- 不適用于所有場景： 對于簡單的場景，引入復合組件模式可能會顯得繁瑣和不必要。
適用場景：
- 表單和表單域： 當設計表單時，可以使用復合式組件將整個表單拆分成多個表單域組件，每個表單域負責處理特定的輸入或驗證邏輯。這樣可以更好地組織表單邏輯，提高可維護性。
- 對話框和模態(tài)框： 對話框或模態(tài)框通常包含標題、內容和操作按鈕?？梢允褂脧秃鲜浇M件將這些部分拆分成獨立的組件，以便在應用中以不同方式重復使用。
2. 受控組件模式
受控組件模式就是將組件轉換為受控組件，通過直接修改 Props 影響組件內部的狀態(tài)，一般在表單組件中比較常用。
import React, { useState } from 'react';
const Button = ({ label, onClick }) => (
<button onClick={onClick}>{label}</button>
);
const TextBox = ({ value, onChange }) => (
<input type="text" value={value} onChange={onChange} />
);
// 受控組件模式的復合組件
const ControlledLoginPanel = () => {
const [loginData, setLoginData] = useState({ username: '', password: '' });
const handleInputChange = (e) => {
const { name, value } = e.target;
setLoginData((prevData) => ({
...prevData,
[name]: value,
}));
};
const handleLogin = () => {
// 實現登錄邏輯
console.log(`Logging in with ${loginData.username} and ${loginData.password}`);
};
return (
<div className="login-panel">
<TextBox
value={loginData.username}
onChange={handleInputChange}
/>
<TextBox
value={loginData.password}
placeholder="Password"
/>
<Button label="Login" onClick={handleLogin} />
</div>
);
};
// 使用示例
const App = () => {
return (
<ControlledLoginPanel />
);
};
export default App;在這個例子中，ControlledLoginPanel 組件就是一個受控組件的例子，其中的輸入框的值由 React 狀態(tài)管理。
優(yōu)點：
- 提供更多的控制： 將內部的狀態(tài)暴露在組件之外，允許用戶通過控制它，而直接影響組件。
- 一致性和可預測性： React 組件的狀態(tài)是單一數據源，使得應用的狀態(tài)變得更加可預測和一致。狀態(tài)的變化完全由 React 控制，減少了意外的行為。 缺點：
- 繁瑣的代碼： 受控組件相對于非受控組件來說，需要更多的代碼。每個輸入框都需要設置對應的狀態(tài)和事件處理函數，這可能導致代碼量的增加。
- 性能開銷： 受控組件每次輸入變化都會觸發(fā)狀態(tài)更新，可能導致頻繁的重新渲染。對于大型或性能敏感的應用，這可能帶來一些性能開銷。
- 不適用于所有場景：受控組件更適用于表單交互比較復雜，需要實時驗證或涉及多個輸入字段之間關系的場景。對于簡單的表單，可能顯得有些繁重。
適用場景：
- 動態(tài)表單元素： 在需要動態(tài)添加或刪除表單元素的情況下，受控組件模式可以很容易地實現。通過使用數組來保存表單元素的狀態(tài)，可以動態(tài)渲染和更新表單。
- 模態(tài)框控制： 當需要通過 props 控制模態(tài)框的顯示或隱藏狀態(tài)時，可以使用受控組件模式。
3. 自定義 Hooks 模式
自定義Hooks模式是一種將組件邏輯提取為可重用的函數的方法。將主要的邏輯轉移到一個Hooks中。用戶可以訪問這個Hooks，并公開了幾個內部邏輯(狀態(tài)、處理程序) ，使用戶能夠更好地控制組件。
import React, { useState } from 'react';
const Button = ({ label, onClick }) => (
<button onClick={onClick}>{label}</button>
);
const TextBox = ({ value, onChange, placeholder }) => (
<input type="text" value={value} onChange={onChange} placeholder={placeholder} />
);
// 自定義 Hook，處理登錄表單邏輯
const useLoginForm = () => {
const [loginData, setLoginData] = useState({ username: '', password: '' });
const handleInputChange = (e) => {
const { name, value } = e.target;
setLoginData((prevData) => ({
...prevData,
[name]: value,
}));
};
const handleLogin = () => {
// 在這里實現登錄邏輯
console.log(`使用用戶名 ${loginData.username} 和密碼 ${loginData.password} 登錄`);
};
return {
loginData,
handleInputChange,
handleLogin,
};
};
// 在組件中使用自定義 Hook
const ControlledLoginPanel = () => {
const { loginData, handleInputChange, handleLogin } = useLoginForm();
return (
<div className="login-panel">
<TextBox
value={loginData.username}
onChange={handleInputChange}
placeholder="用戶名"
/>
<TextBox
value={loginData.password}
onChange={handleInputChange}
placeholder="密碼"
/>
<Button label="登錄" onClick={handleLogin} />
</div>
);
};
// 使用示例
const App = () => {
return (
<ControlledLoginPanel />
);
};
export default App;在這個例子中，我們將與登錄表單相關的狀態(tài)和邏輯抽離到一個自定義 useLoginForm Hook 中。使得 ControlledLoginPanel 組件更專注于渲染 UI，減少了狀態(tài)和事件處理邏輯的混雜。
優(yōu)點：
- 邏輯重用： 將邏輯提取為 Hooks，可以在多個組件中重用。
- 組件更簡潔： 組件代碼更加清晰，只關注與 UI 相關的邏輯。 缺點：
- 實現復雜度變高： 邏輯部分與渲染部分分開，需要將兩者結合起來才能很好的理解組件工作原理。 適用場景：
- 數據獲取和處理邏輯： 將數據獲取和處理邏輯提取到自定義 Hook 中，可以在多個組件之間共享相同的數據邏輯。
- 副作用的封裝： 當有需要在組件中處理副作用的情況，可以將副作用邏輯封裝到自定義 Hook 中，以提高可維護性。
4. Props Getters 模式
模式 3 中的自定義Hooks提供了很好的控制方式；但是比較難以集成，使用者需要按照組件提供的Hooks與State相結合進行編寫邏輯，提高了集成的復雜度。Props Getters模式則是通過簡化這一過程來實現。Getter是一個返回多個屬性的函數，它具有有意義的名稱，使得開發(fā)者能夠清楚地知道哪個Getter對應于哪個JSX元素。
import React, { useState } from 'react';
const Button = ({ getLabel, handleClick }) => (
<button onClick={handleClick}>{getLabel()}</button>
);
const TextBox = ({ getValue, onChange, placeholder }) => (
<input type="text" value={getValue()} onChange={onChange} placeholder={placeholder} />
);
const ControlledLoginPanel = ({ getUsernameProps, getPasswordProps, handleLogin }) => {
return (
<div className="login-panel">
<TextBox {...getUsernameProps()} placeholder="Username" />
<TextBox {...getPasswordProps()} placeholder="Password" />
<Button getLabel={() => 'Login'} handleClick={handleLogin} />
</div>
);
};
// 使用 Props Getters 模式的 Hooks
const useLoginForm = () => {
const [loginData, setLoginData] = useState({ username: '', password: '' });
const handleInputChange = (name) => (e) => {
const { value } = e.target;
setLoginData((prevData) => ({
...prevData,
[name]: value,
}));
};
const handleLogin = () => {
// 實現登錄邏輯
console.log(`Logging in with ${loginData.username} and ${loginData.password}`);
};
const getUsernameProps = () => ({
getValue: () => loginData.username,
onChange: handleInputChange('username'),
});
const getPasswordProps = () => ({
getValue: () => loginData.password,
onChange: handleInputChange('password'),
});
return {
getUsernameProps,
getPasswordProps,
handleLogin,
};
};
// 使用示例
const App = () => {
const { getUsernameProps, getPasswordProps, handleLogin } = useLoginForm();
return (
<ControlledLoginPanel
getUsernameProps={getUsernameProps}
getPasswordProps={getPasswordProps}
handleLogin={handleLogin}
/>
);
};
export default App;在這個例子中，我們基于模式 3 進行了改造，把 ControlledLoginPanel 組件需要的 Props 通過函數的方式進行獲取，以實現更靈活、更簡便的組件復用。
優(yōu)點：
- 易用性： 開發(fā)人員只需要將 Getter傳入到正確的 JSX元素即可。
- 組件關注點分離： 組件通過 props 獲取所需的屬性，使組件關注點更為分離，組件本身不處理狀態(tài)和邏輯，提高了組件的可維護性。
- 減少嵌套層級： 相較于 Hooks 模式，Props Getters 模式可能減少了一些嵌套，使得組件結構更加扁平。
缺點：
- 缺乏可見性： Getter 帶來了抽象，使組件更容易集成，但也更為黑盒。
- 引入更多回調函數： 使用 Props Getters 模式可能引入更多的回調函數，一些開發(fā)者可能認為這會使代碼顯得更加復雜。
- 依賴外部 API： Props Getters 模式依賴外部傳遞的回調函數，可能導致一些依賴關系，不夠自包含。
適用場景：
- 數據過濾： 在一個數據展示組件中，通過 Props Getters 模式可以將數據過濾邏輯提取出來，允許外部根據特定條件獲取過濾后的數據。
- 表單驗證： 在一個表單組件中，通過 Props Getters 模式可以將表單驗證的邏輯從組件中抽離，允許外部調用表單組件的驗證函數，并獲取驗證結果。
5. State Reducer 模式
State Reducer 模式是一種通過將組件的狀態(tài)更新邏輯委托給一個函數，實現更靈活的狀態(tài)管理方式。這種模式通常在處理復雜的狀態(tài)邏輯時非常有用。
import React, { useState } from 'react';
const TextInput = ({ getInputProps }) => {
const inputProps = getInputProps();
return <input {...inputProps} />;
};
const StateReducerExample = () => {
// 初始狀態(tài)為一個空字符串
const [inputValue, setInputValue] = useState('');
// stateReducer 函數用于處理狀態(tài)的變化
const stateReducer = (state, changes) => {
// 使用 switch case 處理不同的狀態(tài)變化情況
switch (Object.keys(changes)[0]) {
// 如果變化的是 value 屬性
case 'value':
// 如果輸入的字符數量超過 10 個，則不允許變化
if (changes.value.length > 10) {
return state;
}
break;
// 可以添加其他 case 處理不同的狀態(tài)變化
default:
break;
}
// 返回新的狀態(tài)
return { ...state, ...changes };
};
// 獲取傳遞給子組件的 props
const getInputProps = () => {
return {
value: inputValue,
// 在輸入框變化時調用 stateReducer 處理狀態(tài)變化
onChange: (e) => setInputValue(stateReducer({ value: e.target.value })),
};
};
return (
<div>
<h3>State Reducer Example</h3>
{/* 將獲取的 props 傳遞給 TextInput 組件 */}
<TextInput getInputProps={getInputProps} />
</div>
);
};
export default StateReducerExample;在這個例子中，StateReducerExample 組件包含一個輸入框，通過 getInputProps 函數將輸入框的值和變化處理邏輯傳遞給 TextInput 組件。stateReducer 函數處理狀態(tài)的變化，確保輸入的字符數量不超過 10 個。
優(yōu)點：
- 狀態(tài)管理靈活： 可以通過自定義的狀態(tài)更新函數實現更復雜的狀態(tài)管理邏輯。
- 更好的組織代碼： 將狀態(tài)的處理邏輯集中在一個 stateReducer 函數中，可以使代碼更有組織性，減少了在組件中處理狀態(tài)的復雜性。
- 清晰的狀態(tài)更新邏輯： 通過 stateReducer 可以清晰地看到每個狀態(tài)變化是如何被處理的，使得狀態(tài)更新邏輯更易于理解。
缺點：
- 增加復雜度： 引入 stateReducer 可能會使代碼結構變得更加復雜，尤其是在處理多個狀態(tài)變化情況時。這可能導致一些開發(fā)者對代碼的理解產生困難。
- 可能造成冗余代碼： 在某些情況下，可能會因為需要為每個狀態(tài)變化情況編寫處理邏輯而導致一些冗余的代碼，特別是在處理簡單狀態(tài)時。
- 不適用于簡單場景： 在簡單場景下使用狀態(tài)約減可能顯得繁瑣不必要。
適用場景：
- 復雜狀態(tài)管理： 當組件的狀態(tài)比較復雜，有多個相關聯的狀態(tài)需要進行更新時，State Reducer 模式可以幫助將狀態(tài)管理邏輯進行更細粒度的控制。
- 異步狀態(tài)更新： 當需要進行異步狀態(tài)更新時，State Reducer 模式可以幫助處理異步回調，以確保狀態(tài)正確更新。
- 控制狀態(tài)更新流程： 在某些場景下，需要更靈活地控制狀態(tài)更新的流程，例如在某個條件下阻止狀態(tài)更新或根據條件進行額外的處理。
結論
通過這 5 種 React 組件設計模式，我們對“控制度”和“復雜度”有了更清晰的認識，下圖是復雜度和控制度的一個趨勢圖。
圖片
總體來說，設計的組件越靈活，功能也就越強大，復雜度也會更高。作為開發(fā)人員，建議大家根據自己的業(yè)務邏輯以及使用人群，靈活使用以上的設計模式。
參考文章
React 組件設計模式
責任編輯：武曉燕
來源：
政采云技術
