解锁React 高阶组件之谜：事后诸葛亮，不如提前知晓

前端

2023-09-21 20:59:03

回望当初，若是早先邂逅此文，React 高阶组件的奥秘早已融会贯通。高阶组件，并非 React API 的内置部分，而是社区进化出的模式，是组件逻辑复用利器。其本质是：一个函数，输入一个组件，输出一个新组件。

高阶组件的本质

高阶组件的运作原理并不复杂：它接收一个组件，包裹一层新的逻辑，再返回一个全新组件。这新增的逻辑层可处理各种任务，诸如：

组件生命周期扩展
属性注入
状态管理
性能优化

SEO 关键词：

掌握高阶组件的精髓，将大大提升代码的复用性、可读性和可维护性。接下来，我们将具体探讨如何利用高阶组件解决实际问题。

1. 组件生命周期扩展

高阶组件可以轻松扩展组件的生命周期方法。例如，我们可以使用高阶组件记录组件挂载和卸载时的时间：

const withLifecycleLogging = (WrappedComponent) => {
  return class extends Component {
    componentDidMount() {
      console.log("Component mounted!");
    }

    componentWillUnmount() {
      console.log("Component unmounted!");
    }

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

2. 属性注入

高阶组件也可以注入属性，从而简化组件使用。比如，我们可以创建高阶组件，向所有组件注入一个共享的 user 属性：

const withUserInjection = (WrappedComponent) => {
  return class extends Component {
    render() {
      return <WrappedComponent {...this.props} user={this.props.user} />;
    }
  };
};

3. 状态管理

高阶组件还能帮助管理状态。我们可以创建高阶组件，将组件的状态提升到全局范围，实现组件间共享：

const withGlobalState = (WrappedComponent) => {
  return class extends Component {
    state = {
      count: 0,
    };

    render() {
      return <WrappedComponent {...this.props} count={this.state.count} />;
    }
  };
};