面试题：React高阶组件中如何封装组件的挂载生命周期逻辑

Question

请详细描述在React中，如何利用高阶组件（HOC）来封装组件挂载阶段（componentDidMount）的生命周期逻辑，并给出一个简单的代码示例。

Answer 1

1. 高阶组件封装 componentDidMount 逻辑的原理

高阶组件（HOC）是一个函数，它接收一个组件并返回一个新的组件。在新组件的 componentDidMount 生命周期钩子中，可以执行我们想要封装的逻辑，然后渲染传入的原始组件。

2. 代码示例

import React from 'react';

// 高阶组件
function withComponentDidMountLogic(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      // 这里编写要封装的 componentDidMount 逻辑
      console.log('组件已挂载，执行封装的逻辑');
    }

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

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

// 使用高阶组件包装 MyComponent
const EnhancedComponent = withComponentDidMountLogic(MyComponent);

export default EnhancedComponent;

在上述代码中，withComponentDidMountLogic 是一个高阶组件，它接收 WrappedComponent 作为参数，并返回一个新的类组件。新组件在 componentDidMount 钩子中打印出特定信息，同时在 render 方法中渲染传入的 WrappedComponent，并传递所有的属性。最后，使用高阶组件包装 MyComponent 得到 EnhancedComponent。