阅读时间约为：6 分钟。
本文首发于个人博客：React高阶组件详解：使用 TypeScript 实现日志记录组件。
我们知道 React 是一个用于构建用户界面的 JavaScript 库，其中，React 组件是 React 应用程序的核心，它们用于组合并呈现应用程序的不同部分。有时，我们需要增强组件的功能，但又不希望修改原始组件的代码。这时，React 高阶组件（Higher-Order Components，HOC）就派上用场了。
React 高阶组件是一个非常强大的工具，可以帮助我们在不修改现有组件的情况下增强组件功能。在本文中，我们将使用 TypeScript 实现一个简单的日志记录高阶组件示例，并解释如何编写和使用高阶组件。以演示如何使用高阶组件来增强组件功能，而不需要修改原始组件的代码。
什么是高阶组件
高阶组件是一个函数，它接收一个组件作为参数，并返回一个新的组件。新组件包装了原始组件，并增强了它的功能。高阶组件可以用于添加共同的逻辑或功能到多个组件中，这种方法在很多情况下比继承或组件复用更灵活。
在 React 中，高阶组件通常被用于以下场景：
- 代码复用：将共同的逻辑提取到高阶组件中，以便在多个组件中重复使用。
- 功能增强：高阶组件可以通过添加或修改 props、渲染逻辑或生命周期方法来增强组件的功能。
- 渲染劫持：高阶组件可以通过更改组件的渲染行为来修改组件的外观或行为。
实现一个日志记录高阶组件
在本文中，我们将使用 TypeScript 和 React 实现一个简单的日志记录高阶组件，以演示高阶组件的使用方法。
首先，我们定义一个高阶组件函数 withLogging ，它接收一个泛型参数 P ，表示原始组件的 props 类型。该函数返回一个新的函数组件 WithLogging ，这个组件可以包装原始组件并添加日志信息。
import React, { FC } from 'react';
// 高阶函数接收一个泛型参数 P，表示原始组件的 props 类型
interface WithLoggingProps {
name: string;
}
const withLogging = <P extends object>(WrappedComponent: React.ComponentType<P>) => {
// 返回一个新的函数组件，这个组件可以包装原始组件
const WithLogging: FC<P & WithLoggingProps> = (props) => {
// 在渲染时添加日志信息
console.log(`Rendering component: ${WrappedComponent.displayName || WrappedComponent.name}`);
return <WrappedComponent {...props as P} />;
};
// 设置新组件的 displayName，便于调试
WithLogging.displayName = `WithLogging(${WrappedComponent.displayName || WrappedComponent.name})`;
return WithLogging;
};
在 withLogging 函数内部，我们创建一个名为 WithLogging 的新函数组件。这个组件会接收原始组件的 props 和一个名为 name 的字符串参数。在渲染时，它会打印一个带有组件名称的日志消息，并渲染原始组件。我们还设置了新组件的 displayName，以便更好地调试。
现在，我们可以使用 withLogging 高阶组件来包装一个原始组件，并增强它的功能。例如，我们可以创建一个简单的无状态组件 Button ，它只是渲染了一个按钮。
// 一个简单的无状态组件
const Button: FC = () => {
return <button>Click me</button>;
};
现在，我们可以像使用 Button 一样使用 LoggedButton 组件，但是它会在每次渲染后被点击时打印一个日志消息。
// 使用高阶组件包装 Button 组件
const ButtonWithLogging = withLogging(Button);
// 渲染应用程序组件
export default function App() {
return (
<div>
{/* 使用包装后的 Button 组件 */}
<ButtonWithLogging name="Submit" />
</div>
);
}
使用 withLogging 高阶组件，我们可以轻松地添加日志记录和其他功能到多个组件中，而不需要修改这些组件的代码。这使得代码更容易维护，更具可读性。
在浏览器中执行上面的例子，会渲染一个包含一个按钮的页面，并在每次点击按钮时，在浏览器的控制台中打印一条日志信息。这是由于 withLogging 高阶组件包装了 Button 组件，并添加了一个事件监听器，在每次点击按钮时记录一条日志。
假设这个按钮被点击了 5 次，输出到浏览器控制台的结果应该是类似下面这样的内容：
Rendering component: WithLogging(Button)
Rendering component: WithLogging(Button)
Rendering component: WithLogging(Button)
Rendering component: WithLogging(Button)
Rendering component: WithLogging(Button)
总结
React 高阶组件是一个非常强大的工具，可以帮助我们在不修改现有组件的情况下增强组件功能。在本文中，我们使用 TypeScript 和 React 实现了一个简单的日志记录高阶组件，并解释了如何编写和使用高阶组件。通过使用高阶组件，我们可以轻松地添加共同的逻辑或功能到多个组件中，使得代码更容易维护和重用。
喜欢的话，就来微信公众号“若非的日志”一起学习啊~
微信公众号：若非的日志原创
