React 命名 class 组件与匿名 class 组件

Question

命名 class 组件和匿名 class 组件之间有区别吗？ HOC 的标准模式是 return 一个匿名的 class 来呈现 WrappedComponent。将普通组件也导出为匿名 class 有什么缺点吗？

命名为class:

MyComponent.js

export default class MyComponent extends Component {...}

....

import MyComponent from './MyComponent';

<MyComponent />

匿名 class:

MyComponent.js

export default class extends Component {...}

....

import MyComponent from './MyComponent';

<MyComponent />

对 React Suspense 有任何影响吗？

Answer 1

如果您使用匿名 class 组件，即您隐式或动态声明的组件，这些 class 组件将被 React（React Dev 工具）命名为 <Unknown />。

例如：

export default class extends Component {...}

将是：

<Unknown>
// rest of the component structure goes here
</Unknown>

注意：

• 未命名的 class 组件更难调试
• 未命名函数可以 导致测试库和工具（例如 Jasmine spies、Enzyme 和 Jest）出现问题