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 方法，根据一些条件动态修改渲染内容

限制
属性代理模式
反向继承模式