class A extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
       return <h1>{this.props.msg}{this.props.data}</h1>;
    }}function hoc(WrappedComponent, f){
   class MyClass extends React.Component {
      constructor(props) {
         super(props);
         this.state = {name: 'alex'};
      }
      render() {
         const {extra, ...passThroughProps} = this.props;
         f("rendering..."+extra);   // redering…100
         return <WrappedComponent data={this.state.name} {...passThroughProps} />;
      }
   };
   MyClass.displayName = 'MyHOC';     // for easy debugging
   return MyClass;}const B = hoc(A, text=>console.log(text));ReactDOM.render(<B msg="hello, " extra="100"/>,document.querySelector("div"));////////////////////////////////////////////////////////////////////////////////////////////////////function getDisplayName(WrappedComponent) {
   return WrappedComponent.displayName || WrappedComponent.name || 'Component';}console.log(getDisplayName(B));   // MyHOC