【八股系列】介绍React高阶组件，适用于什么场景？

本文主要是介绍【八股系列】介绍React高阶组件，适用于什么场景？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

1. HOC的工作原理
2. 返回的新组件
3. 适用场景
4. 注意事项
5. 示例代码

React高阶组件（ Higher-Order Components，简称HOC）是 React中一种高级的 复用组件逻辑的技术。 HOC自身不是 React API的一部分，而是基于 React的组合性质（ Composition）发展出来的一种编程模式。它是一个 接受组件作为参数并返回一个新的组件的函数。

1. HOC的工作原理

HOC通过接收一个组件作为参数，可以对其进行以下操作：

修改传入组件的props
包装传入组件，提供额外的UI或行为
处理状态或生命周期方法
添加副作用，如订阅或日志记录

2. 返回的新组件

返回的新组件通常基于原组件进行了某种增强，比如添加了新的功能、进行了性能优化或实现了复用的逻辑，而无需修改原组件的代码。

3. 适用场景

复用组件逻辑：当多个组件需要共享某些功能时（如数据获取、权限验证、UI主题切换），可以通过HOC封装这些通用逻辑，减少代码重复。
状态管理：结合Redux或其他状态管理库时，HOC可以用来连接组件到store，使得组件能够访问全局状态。
权限控制：实现用户权限验证，只有满足特定条件的用户才能看到或操作组件内容。
性能优化：通过实现shouldComponentUpdate生命周期方法或使用React.memo等手段，HOC可以帮助提升组件的渲染性能。
布局与样式封装：统一处理页面布局或应用全局样式，如在组件外部添加固定的页头和页脚。
数据操作：在组件渲染之前对数据进行预处理，如过滤、排序或格式化数据。

4. 注意事项

HOC应当遵循纯函数的原则，即对于相同的输入始终产生相同的输出，不引起副作用。
使用HOC时应注意不要过度封装，以免造成组件层级过深，难以理解和维护。
随着ReactHooks的普及，某些HOC的使用场景可以用自定义Hook替代，以获得更清晰的逻辑和更好的可读性。

5. 示例代码

下面是一个React高阶组件（HOC）的基本代码示例。HOC通过对布尔值的处理来决定是否渲染被包装的组件。

// withAuthentication.tsx
import React from 'react';// 定义withAuthentication高阶组件
const withAuthentication = (WrappedComponent: React.ComponentType<any>) => {// 返回一个新的组件return class extends React.Component<any> {render() {// 确保isAuthorized是从props接收的const { isAuthorized } = this.props;// 根据isAuthorized的值决定是否渲染WrappedComponentreturn isAuthorized ? <WrappedComponent {...this.props} /> : <div>Unauthorized</div>;}};
};export default withAuthentication;

// MyProtectedComponent.tsx
import React from 'react';
import withAuthentication from './withAuthentication';// 一个简单的受保护的组件示例
class MyProtectedComponent extends React.Component {render() {return <div>Welcome to the protected content!</div>;}
}// 使用withAuthentication装饰MyProtectedComponent
const ProtectedComponent = withAuthentication(MyProtectedComponent);// 渲染ProtectedComponent，并传递isAuthorized为props
export default function AuthenticatedProtectedComponent() {return <ProtectedComponent isAuthorized={true} />;
}

// App.tsx
import React from "react";
import "./App.css";
......
import MyProtectedComponent from "./page/HOC/MyProtectedComponent";function App() {return (<div className="App">......<div className="App-item">测试高阶组件：<MyProtectedComponent /></div></div>);
}export default App;

在这里插入图片描述

withAuthentication是一个HOC，它接收一个组件作为参数，并返回一个新的组件，该组件在渲染时会检查isAuthorized属性来决定是否显示被包裹的组件。MyProtectedComponent是一个简单的组件，用作演示如何使用这个HOC来控制访问权限。最后，在App组件中，通过<ProtectedComponent isAuthorized={true} />来使用这个受保护的组件，并明确指定了isAuthorized为true来允许渲染。可以根据实际情况调整isAuthorized的值。