掌握 React 高阶组件与高阶函数：构建可复用组件的新境界

news2025/1/18 8:41:52

一、引言

在 React 开发中，代码复用性和逻辑分离是提高开发效率和维护性的重要手段。高阶组件（Higher-Order Component, HOC）和高阶函数（Higher-Order Function, HOF）是实现这一目标的两种强大工具。本文将详细介绍这两种技术的概念、应用场景及其实现方式，并通过具体示例帮助你更好地理解和应用它们。

二、高阶函数（HOF）

1. 概念

高阶函数是指以函数作为参数或返回值的函数。它允许我们将函数作为数据进行传递和操作，从而实现更灵活和模块化的代码结构。

// 示例：一个简单的高阶函数
function higherOrderFunction(fn) {
  return function(...args) {
    console.log('执行前');
    const result = fn(...args);
    console.log('执行后');
    return result;
  };
}

const add = (a, b) => a + b;
const enhancedAdd = higherOrderFunction(add);

console.log(enhancedAdd(2, 3)); // 输出: 执行前 5 执行后

2. 应用场景

日志记录：在函数调用前后添加日志。
权限控制：在执行敏感操作前检查用户权限。
性能优化：缓存计算结果以避免重复计算。

三、高阶组件（HOC）

1. 概念

高阶组件是一种设计模式，它接受一个组件并返回一个新的组件。通过这种方式，可以将公共逻辑提取出来，封装成独立的函数，从而实现组件的复用。

import React from 'react';

// 示例：一个简单的高阶组件
function withLogging(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('组件渲染前');
    return <WrappedComponent {...props} />;
  };
}

// 使用高阶组件
const ButtonWithLogging = withLogging(({ label }) => (
  <button>{label}</button>
));

export default function App() {
  return (
    <div>
      <ButtonWithLogging label="点击我" />
    </div>
  );
}

2. 应用场景

状态管理：为多个组件提供相同的状态管理逻辑。
样式注入：为组件添加统一的样式或主题。
权限控制：根据用户权限有条件地渲染组件。
数据获取：在组件加载时自动获取所需数据。

四、结合使用 HOC 和 HOF

高阶组件和高阶函数可以结合使用，进一步提升代码的灵活性和复用性。例如，我们可以使用高阶函数来创建高阶组件，或者将高阶组件应用于高阶函数返回的结果。

import React from 'react';
import PropTypes from 'prop-types';

// 高阶函数
function withDefaultProps(defaultProps) {
  return function enhance(Component) {
    return class extends React.Component {
      static defaultProps = defaultProps;
      render() {
        return <Component {...this.props} />;
      }
    };
  };
}

// 高阶组件
function withLogging(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('组件渲染前');
    return <WrappedComponent {...props} />;
  };
}

// 组合使用
const DefaultButton = withDefaultProps({ label: '默认按钮' })(Button);
const LoggedButton = withLogging(DefaultButton);

function Button({ label }) {
  return <button>{label}</button>;
}

Button.propTypes = {
  label: PropTypes.string,
};

export default function App() {
  return (
    <div>
      <LoggedButton />
    </div>
  );
}