React高阶组件如何实现？

一、首先了解一下高阶组件的基本概念

高阶组件（HOC，Higher-Order Components）不是组件，而是一个函数，它会接收一个组件作为参数并返回一个经过改造的新组件

const EnhancedComponent = higherOrderComponent(WrappedComponent);

二、高阶组件的实现方式

• 属性代理(Props Proxy)
  • 返回一个无状态（stateless）的函数组件
  • 返回一个 class 组件
• 反向继承(Inheritance Inversion)

三、高阶组件能够解决哪些问题

• 抽取重复代码，实现组件复用，常见场景：页面复用。
• 条件渲染，控制组件的渲染逻辑（渲染劫持），常见场景：权限控制。
• 捕获/劫持被处理组件的生命周期，常见场景：组件渲染性能追踪、日志打点。