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

一、引言

在 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>);
}