面试题：React高阶组件如何处理被包裹组件的生命周期

Question

假设你有一个高阶组件，被包裹组件包含componentDidMount生命周期方法，高阶组件如何在不破坏原组件逻辑的情况下，在componentDidMount执行前后添加自定义逻辑？请详细说明思路并给出示例代码。

Answer 1

思路

1. 获取原组件的componentDidMount方法：高阶组件接收原组件作为参数，在高阶组件内部可以访问原组件的生命周期方法。
2. 创建新的componentDidMount方法：在新方法中，先执行自定义的前置逻辑，然后调用原组件的componentDidMount方法，最后执行自定义的后置逻辑。
3. 将新的componentDidMount方法赋值给被包裹组件：通过这种方式，既保留了原组件componentDidMount的逻辑，又添加了自定义逻辑。

示例代码

import React from 'react';

// 高阶组件
function withCustomLogic(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      // 前置自定义逻辑
      console.log('自定义前置逻辑');
      // 调用原组件的componentDidMount方法
      if (typeof WrappedComponent.prototype.componentDidMount === 'function') {
        WrappedComponent.prototype.componentDidMount.call(this);
      }
      // 后置自定义逻辑
      console.log('自定义后置逻辑');
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

// 被包裹组件
class MyComponent extends React.Component {
  componentDidMount() {
    console.log('MyComponent的componentDidMount');
  }
  render() {
    return <div>这是MyComponent</div>;
  }
}

// 使用高阶组件包裹原组件
const EnhancedComponent = withCustomLogic(MyComponent);

export default function App() {
  return (
    <div>
      <EnhancedComponent />
    </div>
  );
}