作為一名 React 開發者，你可能會面臨下面幾個問題：wA028資訊網——每日最新資訊28at.com

• 如何構建一個高復用度性的組件，使其適應不同的業務場景？
• 如何構建一個具有簡單 API的組件，使其易于使用？
• 如何構建一個在 UI 和功能方面具有可擴展性的組件？

為解決上述問題，下面介紹五種 React 組件設計模式，并對比它們的優缺點。wA028資訊網——每日最新資訊28at.com

1. 復合組件模式

復合組件模式是一種通過將多個簡單組件組合在一起創建更復雜組件的方法。這種模式使得組件的邏輯分離，每個簡單組件負責特定的功能。通過復合組件，可以輕松構建可復用的、功能完備的組件。wA028資訊網——每日最新資訊28at.com

如果想要設計一個定制化程度高，API方便理解的組件，可以考慮這個模式，這種模式不會出現多層Props傳遞的情況。wA028資訊網——每日最新資訊28at.com

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。wA028資訊網——每日最新資訊28at.com

優點：wA028資訊網——每日最新資訊28at.com

• API 復雜度降低： 避免將Props全部塞入一個容器組件中，而是直接將Props傳遞給相對應的子組件。
• 高度可復用性： 基礎組件可以在多個場景中重復使用。
• 邏輯分離： 每個基礎組件專注于一項任務。
• 組件數量增多： 隨著組件層級的增加，將會增加JSX的行數，并且代碼可能變得復雜。
• 不適用于所有場景： 對于簡單的場景，引入復合組件模式可能會顯得繁瑣和不必要。

適用場景：wA028資訊網——每日最新資訊28at.com

• 表單和表單域： 當設計表單時，可以使用復合式組件將整個表單拆分成多個表單域組件，每個表單域負責處理特定的輸入或驗證邏輯。這樣可以更好地組織表單邏輯，提高可維護性。
• 對話框和模態框： 對話框或模態框通常包含標題、內容和操作按鈕。可以使用復合式組件將這些部分拆分成獨立的組件，以便在應用中以不同方式重復使用。

2. 受控組件模式

受控組件模式就是將組件轉換為受控組件，通過直接修改 Props 影響組件內部的狀態，一般在表單組件中比較常用。wA028資訊網——每日最新資訊28at.com

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 狀態管理。wA028資訊網——每日最新資訊28at.com

優點：wA028資訊網——每日最新資訊28at.com

• 提供更多的控制： 將內部的狀態暴露在組件之外，允許用戶通過控制它，而直接影響組件。
• 一致性和可預測性： React 組件的狀態是單一數據源，使得應用的狀態變得更加可預測和一致。狀態的變化完全由 React 控制，減少了意外的行為。 缺點：
• 繁瑣的代碼： 受控組件相對于非受控組件來說，需要更多的代碼。每個輸入框都需要設置對應的狀態和事件處理函數，這可能導致代碼量的增加。
• 性能開銷： 受控組件每次輸入變化都會觸發狀態更新，可能導致頻繁的重新渲染。對于大型或性能敏感的應用，這可能帶來一些性能開銷。
• 不適用于所有場景：受控組件更適用于表單交互比較復雜，需要實時驗證或涉及多個輸入字段之間關系的場景。對于簡單的表單，可能顯得有些繁重。

適用場景：wA028資訊網——每日最新資訊28at.com

• 動態表單元素： 在需要動態添加或刪除表單元素的情況下，受控組件模式可以很容易地實現。通過使用數組來保存表單元素的狀態，可以動態渲染和更新表單。
• 模態框控制： 當需要通過 props 控制模態框的顯示或隱藏狀態時，可以使用受控組件模式。

3. 自定義 Hooks 模式

自定義Hooks模式是一種將組件邏輯提取為可重用的函數的方法。將主要的邏輯轉移到一個Hooks中。用戶可以訪問這個Hooks，并公開了幾個內部邏輯(狀態、處理程序) ，使用戶能夠更好地控制組件。wA028資訊網——每日最新資訊28at.com

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,  };};// 在組件中使用自定義 Hookconst 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;

在這個例子中，我們將與登錄表單相關的狀態和邏輯抽離到一個自定義 useLoginForm Hook 中。使得 ControlledLoginPanel 組件更專注于渲染 UI，減少了狀態和事件處理邏輯的混雜。wA028資訊網——每日最新資訊28at.com

優點：wA028資訊網——每日最新資訊28at.com

• 邏輯重用： 將邏輯提取為 Hooks，可以在多個組件中重用。
• 組件更簡潔： 組件代碼更加清晰，只關注與 UI 相關的邏輯。 缺點：
• 實現復雜度變高： 邏輯部分與渲染部分分開，需要將兩者結合起來才能很好的理解組件工作原理。 適用場景：
• 數據獲取和處理邏輯： 將數據獲取和處理邏輯提取到自定義 Hook 中，可以在多個組件之間共享相同的數據邏輯。
• 副作用的封裝： 當有需要在組件中處理副作用的情況，可以將副作用邏輯封裝到自定義 Hook 中，以提高可維護性。

4. Props Getters 模式

模式 3 中的自定義Hooks提供了很好的控制方式；但是比較難以集成，使用者需要按照組件提供的Hooks與State相結合進行編寫邏輯，提高了集成的復雜度。Props Getters模式則是通過簡化這一過程來實現。Getter是一個返回多個屬性的函數，它具有有意義的名稱，使得開發者能夠清楚地知道哪個Getter對應于哪個JSX元素。wA028資訊網——每日最新資訊28at.com

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 模式的 Hooksconst 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 通過函數的方式進行獲取，以實現更靈活、更簡便的組件復用。wA028資訊網——每日最新資訊28at.com

優點：wA028資訊網——每日最新資訊28at.com

• 易用性： 開發人員只需要將 Getter傳入到正確的 JSX元素即可。
• 組件關注點分離： 組件通過 props 獲取所需的屬性，使組件關注點更為分離，組件本身不處理狀態和邏輯，提高了組件的可維護性。
• 減少嵌套層級： 相較于 Hooks 模式，Props Getters 模式可能減少了一些嵌套，使得組件結構更加扁平。

缺點：wA028資訊網——每日最新資訊28at.com

• 缺乏可見性： Getter 帶來了抽象，使組件更容易集成，但也更為黑盒。
• 引入更多回調函數： 使用 Props Getters 模式可能引入更多的回調函數，一些開發者可能認為這會使代碼顯得更加復雜。
• 依賴外部 API： Props Getters 模式依賴外部傳遞的回調函數，可能導致一些依賴關系，不夠自包含。

適用場景：wA028資訊網——每日最新資訊28at.com

• 數據過濾： 在一個數據展示組件中，通過 Props Getters 模式可以將數據過濾邏輯提取出來，允許外部根據特定條件獲取過濾后的數據。
• 表單驗證： 在一個表單組件中，通過 Props Getters 模式可以將表單驗證的邏輯從組件中抽離，允許外部調用表單組件的驗證函數，并獲取驗證結果。

5. State Reducer 模式

State Reducer 模式是一種通過將組件的狀態更新邏輯委托給一個函數，實現更靈活的狀態管理方式。這種模式通常在處理復雜的狀態邏輯時非常有用。wA028資訊網——每日最新資訊28at.com

import React, { useState } from 'react';const TextInput = ({ getInputProps }) => {  const inputProps = getInputProps();  return <input {...inputProps} />;};const StateReducerExample = () => {  // 初始狀態為一個空字符串  const [inputValue, setInputValue] = useState('');  // stateReducer 函數用于處理狀態的變化  const stateReducer = (state, changes) => {    // 使用 switch case 處理不同的狀態變化情況    switch (Object.keys(changes)[0]) {      // 如果變化的是 value 屬性      case 'value':        // 如果輸入的字符數量超過 10 個，則不允許變化        if (changes.value.length > 10) {          return state;        }        break;      // 可以添加其他 case 處理不同的狀態變化      default:        break;    }    // 返回新的狀態    return { ...state, ...changes };  };  // 獲取傳遞給子組件的 props  const getInputProps = () => {    return {      value: inputValue,      // 在輸入框變化時調用 stateReducer 處理狀態變化      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 函數處理狀態的變化，確保輸入的字符數量不超過 10 個。wA028資訊網——每日最新資訊28at.com

優點：wA028資訊網——每日最新資訊28at.com

• 狀態管理靈活： 可以通過自定義的狀態更新函數實現更復雜的狀態管理邏輯。
• 更好的組織代碼： 將狀態的處理邏輯集中在一個 stateReducer 函數中，可以使代碼更有組織性，減少了在組件中處理狀態的復雜性。
• 清晰的狀態更新邏輯： 通過 stateReducer 可以清晰地看到每個狀態變化是如何被處理的，使得狀態更新邏輯更易于理解。

缺點：wA028資訊網——每日最新資訊28at.com

• 增加復雜度： 引入 stateReducer 可能會使代碼結構變得更加復雜，尤其是在處理多個狀態變化情況時。這可能導致一些開發者對代碼的理解產生困難。
• 可能造成冗余代碼： 在某些情況下，可能會因為需要為每個狀態變化情況編寫處理邏輯而導致一些冗余的代碼，特別是在處理簡單狀態時。
• 不適用于簡單場景： 在簡單場景下使用狀態約減可能顯得繁瑣不必要。

適用場景：wA028資訊網——每日最新資訊28at.com

• 復雜狀態管理： 當組件的狀態比較復雜，有多個相關聯的狀態需要進行更新時，State Reducer 模式可以幫助將狀態管理邏輯進行更細粒度的控制。
• 異步狀態更新： 當需要進行異步狀態更新時，State Reducer 模式可以幫助處理異步回調，以確保狀態正確更新。
• 控制狀態更新流程： 在某些場景下，需要更靈活地控制狀態更新的流程，例如在某個條件下阻止狀態更新或根據條件進行額外的處理。

結論

通過這 5 種 React 組件設計模式，我們對“控制度”和“復雜度”有了更清晰的認識，下圖是復雜度和控制度的一個趨勢圖。wA028資訊網——每日最新資訊28at.com

圖片wA028資訊網——每日最新資訊28at.com

總體來說，設計的組件越靈活，功能也就越強大，復雜度也會更高。作為開發人員，建議大家根據自己的業務邏輯以及使用人群，靈活使用以上的設計模式。wA028資訊網——每日最新資訊28at.com

參考文章

React 組件設計模式wA028資訊網——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-59689-0.html淺析五種 React 組件設計模式

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 為什么 Netflix 從大單體演進到聯合網關？

下一篇： 深入理解 Redis Lua 腳本調試技巧和最佳實踐