浅析 5 种 React 组件设计模式

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;

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;

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;

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;

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;