React 中的高阶组件（HOC）和自定义 Hooks 有什么区别？

1. 高阶组件（HOC）的定义和工作方式

高阶组件是一个函数，接收一个组件作为参数，返回一个新的增强版组件。HOC 的本质是在组件外层包裹一层"容器"，通过 Props 注入、生命周期拦截或渲染控制来实现逻辑复用。常见应用场景包括：鉴权检查、日志记录、错误边界包装等。

2. 自定义 Hooks 的定义和工作方式

自定义 Hook 是一个以 use 开头的 JavaScript 函数，内部可以调用其他 Hooks（如 useState、useEffect），将组件逻辑提取为可复用的独立函数。自定义 Hook 不创建额外的组件层级，逻辑直接在调用它的组件内部执行。

3. 核心区别对比

4. 当前推荐方案

React 官方和社区在 2025-2026 年的明确推荐是：优先使用自定义 Hooks 进行逻辑复用，HOC 仅用于特定场景（如需要包裹错误边界、需要兼容旧版类组件、第三方库要求使用 HOC 模式）。

5. HOC 仍适用的场景

• 错误边界（Error Boundary）：React 目前仅类组件支持 componentDidCatch，需通过 HOC 包装实现
• 第三方库集成：某些旧版库（如旧版 React Router、旧版 Redux connect()）仍采用 HOC 模式
• 跨切面关注点：需要在组件渲染外层进行统一的布局包装或 Provider 注入时，HOC 仍有其价值