淺析五種 React 組件設(shè)計(jì)模式

作者：七彩 2024-01-09 09:06:13

復(fù)合組件模式是一種通過(guò)將多個(gè)簡(jiǎn)單組件組合在一起創(chuàng)建更復(fù)雜組件的方法。這種模式使得組件的邏輯分離，每個(gè)簡(jiǎn)單組件負(fù)責(zé)特定的功能。通過(guò)復(fù)合組件，可以輕松構(gòu)建可復(fù)用的、功能完備的組件。

作為一名 React 開(kāi)發(fā)者，你可能會(huì)面臨下面幾個(gè)問(wèn)題：

如何構(gòu)建一個(gè)高復(fù)用度性的組件，使其適應(yīng)不同的業(yè)務(wù)場(chǎng)景？
如何構(gòu)建一個(gè)具有簡(jiǎn)單 API的組件，使其易于使用？
如何構(gòu)建一個(gè)在 UI 和功能方面具有可擴(kuò)展性的組件？

為解決上述問(wèn)題，下面介紹五種 React 組件設(shè)計(jì)模式，并對(duì)比它們的優(yōu)缺點(diǎn)。

1. 復(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ǔ)組件專(zhuān)注于一項(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ì)話(huà)框和模態(tài)框：對(duì)話(huà)框或模態(tài)框通常包含標(biāo)題、內(nèi)容和操作按鈕。可以使用復(fù)合式組件將這些部分拆分成獨(dú)立的組件，以便在應(yīng)用中以不同方式重復(fù)使用。

2. 受控組件模式

受控組件模式就是將組件轉(zhuǎn)換為受控組件，通過(guò)直接修改 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)暴露在組件之外，允許用戶(hù)通過(guò)控制它，而直接影響組件。
一致性和可預(yù)測(cè)性： React 組件的狀態(tài)是單一數(shù)據(jù)源，使得應(yīng)用的狀態(tài)變得更加可預(yù)測(cè)和一致。狀態(tài)的變化完全由 React 控制，減少了意外的行為。缺點(diǎn)：
繁瑣的代碼：受控組件相對(duì)于非受控組件來(lái)說(shuō)，需要更多的代碼。每個(gè)輸入框都需要設(shè)置對(duì)應(yīng)的狀態(tài)和事件處理函數(shù)，這可能導(dǎo)致代碼量的增加。
性能開(kāi)銷(xiāo)：受控組件每次輸入變化都會(huì)觸發(fā)狀態(tài)更新，可能導(dǎo)致頻繁的重新渲染。對(duì)于大型或性能敏感的應(yīng)用，這可能帶來(lái)一些性能開(kāi)銷(xiāo)。
不適用于所有場(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)。通過(guò)使用數(shù)組來(lái)保存表單元素的狀態(tài)，可以動(dòng)態(tài)渲染和更新表單。
模態(tài)框控制：當(dāng)需要通過(guò) props 控制模態(tài)框的顯示或隱藏狀態(tài)時(shí)，可以使用受控組件模式。

3. 自定義 Hooks 模式

自定義Hooks模式是一種將組件邏輯提取為可重用的函數(shù)的方法。將主要的邏輯轉(zhuǎn)移到一個(gè)Hooks中。用戶(hù)可以訪(fǎng)問(wèn)這個(gè)Hooks，并公開(kāi)了幾個(gè)內(nèi)部邏輯(狀態(tài)、處理程序) ，使用戶(hù)能夠更好地控制組件。

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(`使用用戶(hù)名 ${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="用戶(hù)名"
      />
      <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 組件更專(zhuān)注于渲染 UI，減少了狀態(tài)和事件處理邏輯的混雜。

優(yōu)點(diǎn)：

邏輯重用：將邏輯提取為 Hooks，可以在多個(gè)組件中重用。
組件更簡(jiǎn)潔：組件代碼更加清晰，只關(guān)注與 UI 相關(guān)的邏輯。缺點(diǎn)：
實(shí)現(xiàn)復(fù)雜度變高：邏輯部分與渲染部分分開(kāi)，需要將兩者結(jié)合起來(lái)才能很好的理解組件工作原理。適用場(chǎng)景：
數(shù)據(jù)獲取和處理邏輯：將數(shù)據(jù)獲取和處理邏輯提取到自定義 Hook 中，可以在多個(gè)組件之間共享相同的數(shù)據(jù)邏輯。
副作用的封裝：當(dāng)有需要在組件中處理副作用的情況，可以將副作用邏輯封裝到自定義 Hook 中，以提高可維護(hù)性。

4. Props Getters 模式

模式 3 中的自定義Hooks提供了很好的控制方式；但是比較難以集成，使用者需要按照組件提供的Hooks與State相結(jié)合進(jìn)行編寫(xiě)邏輯，提高了集成的復(fù)雜度。Props Getters模式則是通過(guò)簡(jiǎn)化這一過(guò)程來(lái)實(shí)現(xiàn)。Getter是一個(gè)返回多個(gè)屬性的函數(shù)，它具有有意義的名稱(chēng)，使得開(kāi)發(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 通過(guò)函數(shù)的方式進(jìn)行獲取，以實(shí)現(xiàn)更靈活、更簡(jiǎn)便的組件復(fù)用。

優(yōu)點(diǎn)：

易用性：開(kāi)發(fā)人員只需要將 Getter傳入到正確的 JSX元素即可。
組件關(guān)注點(diǎn)分離：組件通過(guò) props 獲取所需的屬性，使組件關(guān)注點(diǎn)更為分離，組件本身不處理狀態(tài)和邏輯，提高了組件的可維護(hù)性。
減少嵌套層級(jí)：相較于 Hooks 模式，Props Getters 模式可能減少了一些嵌套，使得組件結(jié)構(gòu)更加扁平。

缺點(diǎn)：

缺乏可見(jiàn)性： Getter 帶來(lái)了抽象，使組件更容易集成，但也更為黑盒。
引入更多回調(diào)函數(shù)：使用 Props Getters 模式可能引入更多的回調(diào)函數(shù)，一些開(kāi)發(fā)者可能認(rèn)為這會(huì)使代碼顯得更加復(fù)雜。
依賴(lài)外部 API： Props Getters 模式依賴(lài)外部傳遞的回調(diào)函數(shù)，可能導(dǎo)致一些依賴(lài)關(guān)系，不夠自包含。

適用場(chǎng)景：

數(shù)據(jù)過(guò)濾：在一個(gè)數(shù)據(jù)展示組件中，通過(guò) Props Getters 模式可以將數(shù)據(jù)過(guò)濾邏輯提取出來(lái)，允許外部根據(jù)特定條件獲取過(guò)濾后的數(shù)據(jù)。
表單驗(yàn)證：在一個(gè)表單組件中，通過(guò) Props Getters 模式可以將表單驗(yàn)證的邏輯從組件中抽離，允許外部調(diào)用表單組件的驗(yàn)證函數(shù)，并獲取驗(yàn)證結(jié)果。

5. State Reducer 模式

State Reducer 模式是一種通過(guò)將組件的狀態(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ù)量超過(guò) 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è)輸入框，通過(guò) getInputProps 函數(shù)將輸入框的值和變化處理邏輯傳遞給 TextInput 組件。stateReducer 函數(shù)處理狀態(tài)的變化，確保輸入的字符數(shù)量不超過(guò) 10 個(gè)。

優(yōu)點(diǎn)：

狀態(tài)管理靈活：可以通過(guò)自定義的狀態(tài)更新函數(shù)實(shí)現(xiàn)更復(fù)雜的狀態(tài)管理邏輯。
更好的組織代碼：將狀態(tài)的處理邏輯集中在一個(gè) stateReducer 函數(shù)中，可以使代碼更有組織性，減少了在組件中處理狀態(tài)的復(fù)雜性。
清晰的狀態(tài)更新邏輯：通過(guò) stateReducer 可以清晰地看到每個(gè)狀態(tài)變化是如何被處理的，使得狀態(tài)更新邏輯更易于理解。

缺點(diǎn)：

增加復(fù)雜度：引入 stateReducer 可能會(huì)使代碼結(jié)構(gòu)變得更加復(fù)雜，尤其是在處理多個(gè)狀態(tài)變化情況時(shí)。這可能導(dǎo)致一些開(kāi)發(fā)者對(duì)代碼的理解產(chǎn)生困難。
可能造成冗余代碼：在某些情況下，可能會(huì)因?yàn)樾枰獮槊總€(gè)狀態(tài)變化情況編寫(xiě)處理邏輯而導(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)行額外的處理。