Skip to main content

高阶组件

高阶组件（HOC）就是一个函数，且该函数接收一个组件作为参数，并返回一个新的组件。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

限制​

  • 不要在 render 方法中使用 HOC，因为每次渲染组件时，都会调用 HOC，这会导致性能问题
  • 静态方法必须复制，当 HOC 应用于组件时，生成的新组件将不再具有原始组件的静态方法
  • ref 不会往下传递，在使用 HOC 包装组件时，ref 不会自动传递给内部包装组件

属性代理模式​

通过代理目标对象，在目标对象的基础上添加额外的属性和方法。

function HOC(WrappedComponent) {
  return class MyApp extends Component {
    render() {
      const newProps = {
        name: 'Alice',
        age: 18
      };

      return <WrappedComponent {...this.props} {...newProps} />
    }
  }
}

反向继承模式​

function HOC(WrappedComponent) {
  return class MyApp extends WrappedComponent {
    render() {
      return super.render()
    }
  }
}

这种模式不太常见，一般用于

  • 重写生命周期方法，添加一些通用的行为，如日志记录、性能分析等
  • 劫持 render 方法，根据一些条件动态修改渲染内容