🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。
文章目录
- 高阶组件的概念
- 使用场景
- 如何创建一个HOC
- 使用HOC的注意事项
高阶组件（Higher-Order Components，简称HOC）是React中的一种高级技术，用于重用组件逻辑。HOC本身不是React API的一部分，而是基于React的组合特性而形成的一种模式。简单来说，高阶组件就是一个函数，它接收一个组件并返回一个新的组件。
高阶组件的概念
高阶组件的主要概念如下：
- 函数：HOC是一个接受一个组件作为参数并返回一个新组件的函数。
- 不修改输入组件：HOC不会修改传入的组件，而是通过包装（wrapping）来增强其功能。
- 重用代码：HOC可以让你重用代码、逻辑和引导抽象，从而减少代码重复。
使用场景
以下是一些高阶组件的使用场景：
- 代码重用：如果你有多个组件需要相同的功能，可以使用HOC来共享这个功能，而不是在每个组件中重复代码。
- 渲染劫持：HOC可以在组件渲染之前或之后执行额外的操作，例如添加额外的props、操纵渲染元素或甚至根据条件渲染不同的组件。
- 状态提升：HOC可以用来提升状态到父组件，这样多个子组件可以共享状态。
- 操作props：HOC可以用来修改、删除或添加props，从而控制数据流。
- 权限控制：HOC可以用来基于权限渲染不同的组件或内容。
- 日志记录：HOC可以用来记录组件的生命周期方法、props变化等。
如何创建一个HOC
下面是一个简单的HOC示例，它会给传入的组件添加一个额外的props：
function withExtraProps(WrappedComponent) {return function WithExtraProps(props) {const extraProps = { ... };return <WrappedComponent {...props} {...extraProps} />;};
}
// 使用HOC
const MyComponentWithExtraProps = withExtraProps(MyComponent);
使用HOC的注意事项
- 命名约定：通常HOC返回的组件会以
With...开头，以表明这是一个增强的组件。 - 静态方法：如果你在HOC中使用了静态方法，你可能需要手动将它们从原始组件复制到新的组件。
- refs：HOC可能不会自动将refs传递给被包裹的组件，需要使用
React.forwardRef来处理。 - 不要在渲染方法中使用HOC：HOC应该在组件定义之外使用，而不是在组件的渲染方法中，以避免不必要的重新创建组件。
高阶组件是React社区广泛使用的一种模式，它为组件的代码重用和逻辑抽象提供了一种强大的方式。正确地使用HOC可以大大提高代码的可维护性和可读性。