淺析 5 種 React 組件設計模式

作爲一名 React 開發者，你可能會面臨下面幾個問題：

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

爲解決上述問題，下面介紹五種 React 組件設計模式，並對比它們的優缺點。

複合組件模式

複合組件模式是一種通過將多個簡單組件組合在一起創建更復雜組件的方法。這種模式使得組件的邏輯分離，每個簡單組件負責特定的功能。通過複合組件，可以輕鬆構建可複用的、功能完備的組件。

如果想要設計一個定製化程度高，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 class>
      <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。

優點：

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

適用場景：

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

受控組件模式

受控組件模式就是將組件轉換爲受控組件，通過直接修改 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 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 class>
      <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 狀態管理。

優點：

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

適用場景：

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

自定義 Hooks 模式

自定義Hooks模式是一種將組件邏輯提取爲可重用的函數的方法。將主要的邏輯轉移到一個Hooks中。用戶可以訪問這個Hooks，並公開了幾個內部邏輯 (狀態、處理程序) ，使用戶能夠更好地控制組件。

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 class>
      <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，減少了狀態和事件處理邏輯的混雜。

優點：

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

Props Getters 模式

模式 3 中的自定義Hooks提供了很好的控制方式；但是比較難以集成，使用者需要按照組件提供的Hooks與State相結合進行編寫邏輯，提高了集成的複雜度。Props Getters模式則是通過簡化這一過程來實現。Getter是一個返回多個屬性的函數，它具有有意義的名稱，使得開發者能夠清楚地知道哪個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 class>
      <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 通過函數的方式進行獲取，以實現更靈活、更簡便的組件複用。

優點：

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

缺點：

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

適用場景：

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

State Reducer 模式

State Reducer 模式是一種通過將組件的狀態更新邏輯委託給一個函數，實現更靈活的狀態管理方式。這種模式通常在處理複雜的狀態邏輯時非常有用。

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 個。

優點：

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

缺點：

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

適用場景：

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

結論

通過這 5 種 React 組件設計模式，我們對 “控制度” 和“複雜度”有了更清晰的認識，下圖是複雜度和控制度的一個趨勢圖。

總體來說，設計的組件越靈活，功能也就越強大，複雜度也會更高。作爲開發人員，建議大家根據自己的業務邏輯以及使用人羣，靈活使用以上的設計模式。

參考文章

React 組件設計模式

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/6kCoqUu1TlbqETz-9k1tDg

結論

參考文章

猜你喜歡