博客

react高阶实质上就是一个函数，接收一个组件，返回一个新组件

作用就是实现组件的代码复用

• 实现一个能获取到当前组件加载耗时的功能

class BoxComp extends PureComponent {

  componentWillMount() {
    this.start = Date.now();
  }

  componentDidMount() {
    console.log((Date.now() - this.start) + 'ms')
  }

  render() {
    return (
      <div >
        789
      </div>
    );
  }
}

• 如果其他组件也要实现这个功能，不能每个组件都写一套这个逻辑。
• 高阶组件的实现方式

class BoxComp extends PureComponent {
  render() {
    return (
      <div >
        789
      </div>
    );
  }
}

// 传进去一个旧组件 返回一个新组件
function loggerLoadTime(OldComponent) {
  return class extends PureComponent {
    componentWillMount() {
      this.start = Date.now();
    }

    componentDidMount() {
      console.log((Date.now() - this.start) + 'ms')
    }

    render() {
      return <OldComponent {...this.props} />
    }
  }
}

const HighComp = loggerLoadTime(BoxComp);

• 所有需要加载耗时功能的组件都可以调用loggerLoadTime方法实现