2022年前端React的100道面试题的第16题：关于高阶组件
最新回答
长发与酒
2026-10-19 16:52:46
关于高阶组件（HOC）的解答如下：
- 高阶组件的定义：高阶组件（HOC）是参数为组件，返回值为新组件的函数。它不是 React API 的一部分，而是一种基于 React 的组合特性形成的设计模式。组件是将 props 转换为 UI，而高阶组件则是将组件转换为另一个组件。
- HOC 的定义方式：HOC 通过将组件包装在容器组件中来组成新组件，而不是通过修改传入的组件或继承方式进行复制。
- 高阶组件的用途：高阶组件可用于渲染劫持，即它可以控制组件的渲染过程，从而实现对组件渲染结果的修改或增强。
- 在 render 方法中使用 HOC 的问题：在 render 方法中使用 HOC 会有性能问题。因为每次调用 render 函数都会创建一个新的 EnhancedComponent，导致子树每次渲染都会进行卸载和重新挂载的操作，这不仅仅是性能问题，还会导致组件及其所有子组件的状态丢失。
- 静态属性的处理：由于高阶组件返回的是一个新的组件，因此传入的组件所具有的静态属性需要手动进行复制，否则在新组件中将无法访问这些静态属性。可以使用 hoist-non-react-statics 库来自动拷贝所有非 React 静态方法。
- Ref 的转发：高阶组件可以看做是一个容器组件，传入的参数组件成了子组件。由于 Ref 仅能获取子组件实例且无法通过 props 获取，因此当对高阶组件传 ref 属性时，拿到的是容器组件实例，而非真实的目标组件。此时需要使用 React.forwardRef() 提供的 ref 转发功能。
综上所述，关于高阶组件的正确理解是：它是一个参数为组件、返回值为新组件的函数，可用于渲染劫持，但在 render 方法中使用会有性能问题，需要注意静态属性的处理和 Ref 的转发。
热门标签
