react18高阶组件

 高阶组件的本质上就是函数，接受一个组件作为参数，然后返回一个组件。解决了组件之间如何横向抽离公共逻辑的问题。类组件之间常使用，函数组件中也可以使用，但更多的时候使用自定义hooks。

高阶组件命名一般采用with开头，它可以将普通组件内部的公用功能抽离出来，复用在其被调用的组件上。

 举个例子，需求：每个组件渲染 销毁的时候打印日志

import React, { useEffect } from 'react';

// 定义一个高阶组件
const withLogger = (WrappedComponent) => {
  return (props) => {
    useEffect(() => {
      console.log(`Component ${WrappedComponent.name} is mounted.`);
      return () => {
        console.log(`Component ${WrappedComponent.name} is going to unmount.`);
      };
    }, []);

    return ;
  };
};

// 使用高阶组件增强函数组件
const MyComponent = () => {
  return 
My Component
;
};

const EnhancedComponent = withLogger(MyComponent);

// 渲染增强后的组件
const App = () => {
  return (
    

      
    
  );
};

export default App;

特别注意：

1.高阶函数内部首先return了一个组件，然后这个组件中return了视图 并且传递了props

2.不要在render中使用高阶组件

3.不要在高阶组件内部更改传入的组件