高阶组件的本质上就是函数，接受一个组件作为参数，然后返回一个组件。解决了组件之间如何横向抽离公共逻辑的问题。类组件之间常使用，函数组件中也可以使用，但更多的时候使用自定义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 <WrappedComponent {...props} />;};
};// 使用高阶组件增强函数组件
const MyComponent = () => {return <div>My Component</div>;
};const EnhancedComponent = withLogger(MyComponent);// 渲染增强后的组件
const App = () => {return (<div><EnhancedComponent /></div>);
};export default App;

特别注意：

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

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

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