React 组件 `displayName` 属性的作用和影响

displayName 是 React 组件的一个静态属性，虽然我们平时很少专门设置它但在一些代码库里还是能经常看到它的身影。那么这个 displayName 属性到底有啥用，如果不设置它的话 React 会如何处理呢？

displayName 属性的作用

  • 协助 React dev tool 显示正确的组件名称
  • 协助 dev server 进行 Fast Refresh

React 如何解析/处理 displayName

  • default 导出的匿名组件，dev tool 上会显示 default, 与 import 时用的名称无关。
  • 函数式组件，只要不是匿名函数， dev tool 都能正确展示组件名称。
  • 当组件是匿名函数但通过一个变量引用并导出该变量时， dev tool 会使用该变量名称。
  • 如果用变量引用一个具名函数组件并导出该变量时，dev tool 会优先使用函数名称。
  • displayName 在 dev tool 显示的优先级高于函数名称。

总结：displayName > 函数名称 > 引用变量名称

#Dev

Read Next

React 中使用 ComponentPropsWithoutRef 扩展 html 元素

有时会需要基于原生 HTML 元素扩展一些自定义 React 组件，这个过程中你需要手工指定需要用到的原生 HTML 元素本机属性，如 `onClick` `type` 等，`ComponentPropsWithoutRef` 类型可以帮你获取 HTML 元素的所有本机属性作为组件的 props 类型，从而避免手工劳动。

TypeScript 定义类型更应该用 type 还是 interface？

自 TypeScript 第一个版本开始 `interface` 就存在，它们受到面向对象编程的启发，允许你定义对象或使用继承来创建类型。 但 TypeScript 中的 `type` 除了表示 string、number 等基本类型，也可以定义对象甚至通过`交叉类型` 和 `联合类型` 来表达类型间的关系并创建一个新类型。 声明对象类型时，更应该使用 `type` 还是 `interface` 呢？