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