React进阶之高阶组件

高阶组件（HOC）是React中用于复用组件逻辑的一种高级技术。它是一个以组件作为参数并返回一个新组件的函数。

下面是一个简单的高阶组件示例，它将传入组件包装在一个新组件中，并添加一些额外的功能，例如日志记录：

import React, { Component } from 'react';
 
// 高阶组件
const withLogging = (WrappedComponent) => {
  class HOC extends Component {
    componentDidMount() {
      console.log(`${WrappedComponent.name} mounted`);
    }
 
    render() {
      // 将属性传递给被包装的组件
      return <WrappedComponent {...this.props} />;
    }
  }
 
  return HOC;
};
 
// 被包装的组件
const MyComponent = () => <div>My Component</div>;
 
// 应用高阶组件
const MyComponentWithLogging = withLogging(MyComponent);
 
export default MyComponentWithLogging;

在这个例子中，withLogging 是一个高阶组件，它接收一个组件 WrappedComponent 作为参数，并返回一个新的组件 HOC。这个新组件在 componentDidMount 生命周期方法中添加了日志记录功能，并将所有传递给它的属性传递给了被包装的组件。

使用高阶组件时，你只需调用它并传入你想要包装的组件，如 MyComponentWithLogging = withLogging(MyComponent)。这样，每当 MyComponent 被挂载时，控制台就会显示一条消息。