react 组件加上 displayName 属性的作用是什么

react 组件加上 displayName 属性的作用是什么

在React中，为组件添加displayName属性的主要作用是方便调试和识别组件。在开发过程中，尤其是在查看浏览器开发者工具（如React DevTools扩展）时，displayName属性的值会显示为组件的名称，这对于追踪组件层次结构、查找特定组件以及理解组件之间的交互非常有用。

在React组件类或函数组件定义中，displayName属性可以这样设置：

对于类组件：

class MyComponent extends React.Component {
  static displayName = 'MyComponentDisplayName'; // 设置类组件的displayName

  // ...
}

对于函数组件：

const MyFunctionalComponent = (props) => {
  // ...
};

MyFunctionalComponent.displayName = 'MyFunctionalComponentDisplayName'; // 设置函数组件的displayName

或者使用函数表达式时，可以在函数表达式外面直接赋值：

const MyFunctionalComponent = (props) => {
  // ...
};

MyFunctionalComponent.displayName = 'MyFunctionalComponentDisplayName';

另外，如果使用了诸如create-react-app、TypeScript或者其他支持装饰器的工具链，还可以通过装饰器自动设置displayName：

import { withDisplayName } from 'some-decorator-library';

@withDisplayName('MyDecoratedComponent')
class DecoratedComponent extends React.Component {
  // ...
}

如果省略了displayName属性，React会尝试基于组件的构造函数或函数名称自动推断一个名称。
但为了代码可读性和调试过程中的明确性，尤其是对于简化的箭头函数组件，手动设置displayName是一个很好的实践。
此外，在一些高级用例中，如高阶组件包裹后的组件，设置displayName可以帮助在调试工具中更好地反映组件的真实来源和层级关系。