请解释 React 中的高阶组件（HOC）是什么，并说明它和普通组件之间的差异，同时分析其优缺点以及适用场景。

回答思路

1. 【回答框架 1】高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧，它是一种函数，接收一个组件作为参数并返回一个新的增强组件。其本质是纯函数，可以添加 props、处理渲染逻辑或包装子组件。
2. 【回答框架 2】与普通组件的核心区别在于：普通组件是 UI 的封装单位，返回 JSX 元素；而 HOC 是逻辑的封装单位，它不直接渲染 UI，而是通过包装原始组件来增加功能。HOC 不对组件内部进行修改，只是增强，它返回的是一个新的组件。
3. 【回答框架 3】优点包括：逻辑复用性强，可以将多个组件的共同逻辑抽取到 HOC 中；代码可维护性和可读性好；方便进行 props 的增强与劫持。缺点包括：多层 HOC 嵌套会导致组件层级过深，增加调试难度；props 属性名可能冲突；无法直接使用 Hook，且如果滥用会导致性能问题。
4. 【回答框架 4】应用场景包括：权限控制（如验证用户登录状态后渲染相应组件）、日志记录、数据注入（如从全局状态中取数据并通过 props 传入）、页面布局包装等。在使用时应确保 HOC 保持纯函数特性，并正确传递 ref（使用 forwardRef）和静态属性。
5. 【关键点 1】HOC 是接收组件并返回新组件的函数，用于复用逻辑。
6. 【关键点 2】HOC 与普通组件的区别在于封装逻辑 vs 封装 UI。
7. 【关键点 3】优点：逻辑复用、灵活；缺点：层级深、可能冲突、性能开销。
8. 【关键点 4】适合权限、日志、数据注入等场景。
9. 【易错点 1】HOC 不能保证绝对的逻辑隔离，与普通组件混合使用可能导致嵌套过深，影响性能。
10. 【易错点 2】props 冲突问题：HOC 添加的 props 可能与原组件接受的 props 冲突，需要进行合理处理。
11. 【易错点 3】React 官方更推荐使用 Hooks 进行逻辑复用，避免不必要的 HOC。