如何避免React中经React.memo包装的组件在DevTools中显示为Anonymous

出现匿名显示的核心原因是你传入React.memo的是没有名称的匿名箭头函数，React无法读取到有效组件名。可以通过以下两种方式解决：

• 方法1：传入具名函数组件
  你可以先定义具名函数再用React.memo包裹，或者直接在React.memo的参数中写具名函数：

  // 写法1：先定义再包裹
  const MyComponent = (props) => <div>...</div>;
  export default React.memo(MyComponent);
  
  // 写法2：直接传入具名函数
  const MyComponent = React.memo(function MyComponent(props) {
    return <div>...</div>;
  });
  

  以上两种写法React都会自动读取函数的name属性作为组件名，DevTools就能正常显示MyComponent。
• 方法2：手动设置displayName属性
  如果你不想修改现有匿名函数的写法，可以手动给记忆化后的组件指定displayName：

  const MyComponent = React.memo((props) => <div>...</div>);
  MyComponent.displayName = 'MyComponent';
  

  该属性的优先级最高，会覆盖函数本身的名称，适合需要自定义组件显示名称的场景。

内容的提问来源于stack exchange，提问作者Sam Magura