react18高阶组件

 高阶组件的本质上就是函数，担当一个组件作为参数，然后返回一个组件。办理了组件之间怎样横向抽离公共逻辑的题目。类组件之间常使用，函数组件中也可以使用，但更多的时间使用自界说hooks。
高阶组件定名一样平常接纳with开头，它可以将平常组件内部的公勤劳能抽离出来，复用在其被调用的组件上。
 举个例子，需求：每个组件渲染 烧毁的时间打印日志

2. import React, { useEffect } from 'react';
4. // 定义一个高阶组件
5. const withLogger = (WrappedComponent) => {
6.   return (props) => {
7.     useEffect(() => {
8.       console.log(`Component ${WrappedComponent.name} is mounted.`);
9.       return () => {
10.         console.log(`Component ${WrappedComponent.name} is going to unmount.`);
11.       };
12.     }, []);
14.     return <WrappedComponent {...props} />;
15.   };
16. };
18. // 使用高阶组件增强函数组件
19. const MyComponent = () => {
20.   return <div>My Component</div>;
21. };
23. const EnhancedComponent = withLogger(MyComponent);
25. // 渲染增强后的组件
26. const App = () => {
27.   return (
28.     <div>
29.       <EnhancedComponent />
30.     </div>
31.   );
32. };
34. export default App;

复制代码

特殊注意：
1.高阶函数内部起首return了一个组件，然后这个组件中return了视图 而且转达了props
2.不要在render中使用高阶组件
3.不要在高阶组件内部更改传入的组件