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