解决使用react devtools调试工具时无法显示组件名称的问题

现象：

 原因： react使用了函数组件，并使用了React.memo来包裹，而React.memo里面使用了箭头函数。

 

当你在 React.memo 包装的组件内部使用箭头函数时，React DevTools 可能会无法正确识别组件的名称，通常会显示为 "Memo(Anonymous)"，而不是你期望的组件名称。

这是因为箭头函数是匿名的，无法提供给 React DevTools 一个明确的名称。

解决办法：

1. 在React.memo内部使用function命名函数：

   export const Header: React.FC = React.memo(

   // 在这里给出一个有名字的函数，而不是匿名箭头函数

   function Header() { // 组件代码块 }

   );

2. 给函数组件手动添加 displayName 属性：

 export const Header: React.FC = React.memo(() => { // 组件代码块 });  Header.displayName = 'Header'; // 手动设置函数组件的显示名称