大白话解释 React 中高阶组件（HOC）的概念和应用场景，并实现一个简单的 HOC。

news2025/3/14 13:48:56

高阶组件（HOC）的概念

在 React 里，高阶组件（Higher-Order Component，简称 HOC）就像是一个“超级工厂函数”。它本身是一个函数，而且这个函数接收一个组件作为参数，然后返回一个新的组件。这个新组件通常会增强或者修改传入的那个组件的功能，就好像给原来的组件穿上了一件“功能外衣”，让它具备了额外的能力，比如添加一些通用的逻辑、修改组件的 props 等。但高阶组件并不是 React 特有的概念，在函数式编程里也有类似的高阶函数的概念，高阶组件只是在 React 中对这种概念的应用。

高阶组件的应用场景

代码复用：当多个组件需要共享一些相同的逻辑时，比如都需要进行数据的加载和处理，或者都需要进行权限验证，就可以把这些逻辑封装在高阶组件里，然后让这些组件都通过高阶组件来增强，避免在每个组件里重复编写相同的代码。
组件增强：可以通过高阶组件给组件添加一些额外的功能，比如添加生命周期钩子函数，或者修改组件的 props。例如，在一些组件中需要在组件挂载时发送网络请求获取数据，就可以用高阶组件来统一处理这个逻辑。
权限控制：在应用中，不同的用户可能有不同的权限，有些组件只有特定权限的用户才能访问。可以使用高阶组件来检查用户的权限，如果用户没有权限，就返回一个提示信息或者重定向到其他页面；如果有权限，就正常渲染组件。
数据处理：对组件接收到的 props 进行处理，比如对数据进行格式化、过滤等操作，然后再将处理后的 props 传递给原组件。

实现一个简单的 HOC

下面实现一个简单的高阶组件，这个高阶组件的功能是给传入的组件添加一个额外的 props。

import React from'react';

// 定义一个高阶组件 withExtraProp
// 它接收一个参数 WrappedComponent，这个 WrappedComponent 就是要被增强的组件
const withExtraProp = (WrappedComponent) => {
    // 返回一个新的组件，这个新组件是一个函数式组件
    return (props) => {
        // 给新组件添加一个额外的 props，这里添加了一个名为 extraProp 的 props，值为 "这是额外的属性"
        const newProps = {
           ...props,
            extraProp: "这是额外的属性"
        };
        // 渲染被包裹的组件 WrappedComponent，并将新的 props 传递给它
        return <WrappedComponent {...newProps} />;
    };
};

// 定义一个普通的函数式组件 MyComponent
const MyComponent = (props) => {
    return (
        <div>
            {/* 输出组件接收到的 props 中的 extraProp */}
            <p>{props.extraProp}</p>
            {/* 这里可以继续编写组件的其他内容 */}
            <p>这是我的组件内容</p>
        </div>
    );
};

// 使用高阶组件 withExtraProp 来增强 MyComponent 组件
// 增强后的组件被命名为 EnhancedComponent
const EnhancedComponent = withExtraProp(MyComponent);

// 导出 EnhancedComponent 组件，以便在其他地方使用
export default EnhancedComponent;

在上述代码中：

首先定义了一个高阶组件 withExtraProp，它接收一个组件 WrappedComponent 作为参数，并返回一个新的函数式组件。
在返回的新组件中，创建了一个新的 props 对象 newProps，它包含了原来的 props 以及额外添加的 extraProp。
然后使用 <WrappedComponent {...newProps} /> 来渲染被包裹的组件，并将新的 props 传递给它。
接着定义了一个普通的函数式组件 MyComponent，它会输出接收到的 extraProp。
最后通过 withExtraProp(MyComponent) 调用高阶组件来增强 MyComponent 组件，得到增强后的 EnhancedComponent 组件并导出。