React组件复用

组件复用

概念

组件复用是指将可复用的逻辑或 UI 提取到单独的组件中，以便在多个地方复用。这可以提高代码的可维护性和可读性，并减少重复代码。

用法

• 提取通用 UI：将重复的 UI 提取成一个组件。
• 抽象业务逻辑：将通用的业务逻辑封装到自定义钩子（Custom Hook）中。

使用场景

• 按钮、输入框、卡片等 UI 组件。
• 数据加载、表单验证等业务逻辑。

// 1. 提取一个通用的 Button 组件
function Button({ onClick, children }) {
  return (
    <button onClick={onClick} style={{ padding: '10px 20px', backgroundColor: '#007bff', color: 'white' }}>
      {children}
    </button>
  );
}

// 2. 使用 Button 组件
function App() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <Button onClick={handleClick}>Click me</Button>
      <Button onClick={() => console.log('Another button clicked!')}>Another Button</Button>
    </div>
  );
}

代码解析：

• Button 组件：将通用的按钮样式和逻辑提取到一个组件中。
• onClick 和 children：通过 Props 传递点击事件和按钮内容。
• 复用：在 App 组件中多次使用 Button 组件。

封装公用组件

首先，我们需要将公用组件的逻辑和 UI 封装到一个单独的组件中。假设我们要封装一个通用的 Button 组件。

代码示例：封装 Button 组件

// src/components/Button.js
import React from 'react';

// 封装一个通用的 Button 组件
function Button({ onClick, children, type = 'primary' }) {
  // 根据传入的 type 设置按钮样式
  const buttonStyles = {
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    backgroundColor: type === 'primary' ? '#007bff' : '#6c757d',
    color: 'white',
  };

  return (
    <button onClick={onClick} style={buttonStyles}>
      {children}
    </button>
  );
}

export default Button; // 导出组件

代码解析：

• Button 组件：接收 onClick、children 和 type 三个 props。
  • onClick：按钮的点击事件。
  • children：按钮的内容（如文本）。
  • type：按钮的类型（如 primary 或 secondary），默认为 primary。
• buttonStyles：根据 type 动态设置按钮的样式。
• export default Button：将组件导出，以便其他组件或页面使用。

在其他组件或页面中使用公用组件

封装好公用组件后，我们可以在其他组件或页面中通过 import 引入并使用它。

代码示例：在 App 组件中使用 Button 组件

// src/App.js
import React from 'react';
import Button from './components/Button'; // 引入封装的 Button 组件

function App() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <h1>Welcome to My App</h1>
      {/* 使用 Button 组件 */}
      <Button onClick={handleClick}>Primary Button</Button>
      <Button type="secondary" onClick={() => console.log('Secondary Button clicked!')}>
        Secondary Button
      </Button>
    </div>
  );
}

export default App;

代码解析：

• import Button from './components/Button'：引入封装的 Button 组件。
• 使用 Button 组件：
  • 第一个 Button：使用默认的 type（primary），并传递 onClick 和 children。
  • 第二个 Button：指定 type 为 secondary，并传递 onClick 和 children。

使用场景示例

假设你有一个登录页面和一个注册页面，它们都需要使用 Button 组件。

代码示例：在 Login 和 Register 页面中使用 Button 组件

// src/pages/Login.js
import React from 'react';
import Button from '../components/Button';

function Login() {
  const handleLogin = () => {
    console.log('Login button clicked!');
  };

  return (
    <div>
      <h2>Login Page</h2>
      <Button onClick={handleLogin}>Login</Button>
    </div>
  );
}

export default Login;


// src/pages/Register.js
import React from 'react';
import Button from '../components/Button';

function Register() {
  const handleRegister = () => {
    console.log('Register button clicked!');
  };

  return (
    <div>
      <h2>Register Page</h2>
      <Button type="secondary" onClick={handleRegister}>
        Register
      </Button>
    </div>
  );
}

export default Register;

代码解析：

• Login 页面和 Register 页面都使用 Button 组件，但分别使用了不同的 type 和 onClick 逻辑。
• 通过复用 Button 组件，避免了重复编写按钮的样式和逻辑。

使用公用组件的注意事项

1. props 设计要灵活：

   • 通过 props 传递必要的数据和事件，确保组件可以被灵活使用。
   • 使用默认值（如 type = 'primary'）来简化调用。

2. 组件命名清晰：

   • 组件的文件名和导出名称要有意义，如 Button.js 和 export default Button。

3. 样式和逻辑分离：

   • 如果样式复杂，可以考虑使用 CSS Modules、Styled Components 或 Tailwind CSS 来管理样式。

4. 复用组件与业务组件分离：

   • 将通用的公用组件（如 Button、Input）放在 src/components 目录下。
   • 将业务相关的组件（如 Login、Register）放在 src/pages 或 src/features 目录下。