浅析 5 种 React 组件设计模式

856次阅读  |  发布于10月以前

图片作为一名 React 开发者，你可能会面临下面几个问题：

为解决上述问题，下面介绍五种 React 组件设计模式，并对比它们的优缺点。

  1. 复合组件模式

复合组件模式是一种通过将多个简单组件组合在一起创建更复杂组件的方法。这种模式使得组件的逻辑分离，每个简单组件负责特定的功能。通过复合组件，可以轻松构建可复用的、功能完备的组件。

如果想要设计一个定制化程度高，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 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。

优点：

适用场景：

  1. 受控组件模式

受控组件模式就是将组件转换为受控组件，通过直接修改 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 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 状态管理。

优点：

适用场景：

  1. 自定义 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 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，减少了状态和事件处理逻辑的混杂。

优点：

  1. 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 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 = () => {
    // 实现登录逻辑
    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 通过函数的方式进行获取，以实现更灵活、更简便的组件复用。

优点：

缺点：

适用场景：

  1. 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 个。

优点：

缺点：

适用场景：

结论

通过这 5 种 React 组件设计模式，我们对“控制度”和“复杂度”有了更清晰的认识，下图是复杂度和控制度的一个趋势图。

总体来说，设计的组件越灵活，功能也就越强大，复杂度也会更高。作为开发人员，建议大家根据自己的业务逻辑以及使用人群，灵活使用以上的设计模式。

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8