11 组件之组件的复用

在前一篇中，我们讨论了 React 组件的两种类型：类组件与函数组件。了解了这些基础类型之后，接下来我们将深入探讨如何实现组件的复用。组件的复用是 React 强大的一个特性，它使得我们能够更高效地构建应用，提升代码的可维护性。

组件复用的概念

组件复用指的是在不同的地方多次使用相同的组件，这样不仅可以减少代码的重复，还可以让我们更容易管理和更新代码。React 提倡创建小而可复用的组件，这样的组件可以通过不同的 props 在应用中生成不同的表现。

示例：创建一个复用的按钮组件

首先，让我们从创建一个简单的按钮组件开始。我们会定义一个名为 MyButton 的函数组件，它将接收一些 props 以实现不同的功能。

import React from 'react';

const MyButton = ({ onClick, label, styleType }) => {
    return (
        <button className={`btn ${styleType}`} onClick={onClick}>
            {label}
        </button>
    );
};

export default MyButton;

在这个 MyButton 组件中，我们定义了三个 props：

• onClick: 点击按钮时执行的函数。
• label: 按钮上显示的文本。
• styleType: 按钮的样式类型，用于控制按钮的外观。

使用复用的组件

现在我们可以在不同的地方使用这个按钮组件，而不需要重复编写按钮的 HTML 代码。

import React from 'react';
import MyButton from './MyButton';

const App = () => {
    const handleClick1 = () => {
        alert('Button 1 clicked!');
    };

    const handleClick2 = () => {
        alert('Button 2 clicked!');
    };

    return (
        <div>
            <h1>Welcome to My App!</h1>
            <MyButton onClick={handleClick1} label="Click Me 1" styleType="primary" />
            <MyButton onClick={handleClick2} label="Click Me 2" styleType="secondary" />
        </div>
    );
};

export default App;

在这里，我们在 App 组件中使用了两次 MyButton 组件，每次传递不同的 props。通过这种方式，我们能够创建不同功能的按钮，而不必为每个按钮重新编写相同的代码。

高阶组件与组件复用

除了直接复用组件之外，React 还提供了高阶组件（Higher Order Components，HOC）的概念。高阶组件是一个函数，接收组件作为参数并返回一个新的组件。它们用于增强组件的功能，比如逻辑复用和状态管理。

创建一个高阶组件

例如，我们可以创建一个高阶组件用来处理按钮的点击次数，代码如下：

const withClickCounter = (WrappedComponent) => {
    return class WithClickCounter extends React.Component {
        state = {
            count: 0,
        };

        handleClick = () => {
            this.setState((prevState) => ({ count: prevState.count + 1 }));
            this.props.onClick();
        };

        render() {
            return (
                <>
                    <WrappedComponent {...this.props} onClick={this.handleClick} />
                    <p>Button clicked {this.state.count} times</p>
                </>
            );
        }
    };
};

现在，我们可以使用这个高阶组件来增强 MyButton：

const EnhancedButton = withClickCounter(MyButton);

使用增强后的按钮

const App = () => {
    const handleClick = () => {
        alert('Enhanced button clicked!');
    };

    return (
        <div>
            <h1>Welcome to My Enhanced App!</h1>
            <EnhancedButton label="Click Me" styleType="primary" onClick={handleClick} />
        </div>
    );
};

export default App;

在这个例子中，EnhancedButton 现在拥有按钮点击的计数功能，而 MyButton 依旧保持了它的原始功能。这展示了如何通过高阶组件实现组件的复用和功能的增强。

小结

在这一篇中，我们探讨了如何在 React 中实现组件的复用，无论是通过简单的组件传递 props 还是通过高阶组件进行功能增强，组件复用不仅能让代码更整洁，还能提升开发效率。在下一篇文章中，我们将继续深入讨论组件的 props 使用，了解如何通过 props 传递数据以及高级用法。

继续学习 React，让你的应用更加高效与灵活！