react初始高阶组件

高阶组件（HOC）是React中复用组件逻辑的一种高级技术。以下是一个简单的React HOC示例，它为一个组件添加日志功能：

import React from 'react';
 
// 高阶组件
const withLogging = (WrappedComponent) => {
  class HOC extends React.Component {
    componentDidMount() {
      console.log(`${WrappedComponent.displayName} mounted`);
    }
 
    componentWillUnmount() {
      console.log(`${WrappedComponent.displayName} unmounted`);
    }
 
    render() {
      // 将属性传递给被包装的组件
      return <WrappedComponent {...this.props} />;
    }
  }
 
  // 设置显示名称，便于调试
  HOC.displayName = `WithLogging(${WrappedComponent.displayName})`;
  return HOC;
};
 
// 使用高阶组件
const MyComponent = (props) => (
  <div>
    <h1>Hello, {props.name}</h1>
  </div>
);
MyComponent.displayName = 'MyComponent';
 
export default withLogging(MyComponent);

在这个例子中，withLogging是一个高阶组件，它接收一个组件WrappedComponent，并返回一个新的组件，在这个新的组件中添加了挂载和卸载的日志功能。被包装的组件通过WrappedComponent访问，并且可以通过this.props接收外部传入的属性。