Javascript 在编写React函数组件时，在函数变量之上使用函数是否会受到惩罚？

考虑TypeScript中以下两个React函数组件的定义：

import React from 'react';

export interface ComponentProps {
    // props omitted for sake of brevity.
}

export function MyComponent1(props: ComponentProps): JSX.Element {
    // Use hooks and return elements for Virtual DOM.
    // Omitted for sake of brevity.
}

export const MyComponent2: React.FC<ComponentProps> = (props: ComponentProps) => {
    // Use hooks and return elements for Virtual DOM.
    // Omitted for sake of brevity.
}

从“React”导入React；
导出接口组件{
//为了简洁起见，省略了道具。
}
导出函数MyComponent1（props:ComponentProps）：JSX.Element{
//对虚拟DOM使用挂钩和返回元素。
//为简洁起见省略。
}
导出常量MyComponent2:React.FC=（props:ComponentProps）=>{
//对虚拟DOM使用挂钩和返回元素。
//为简洁起见省略。
}

---

使用其中一个是否有好处，特别是在性能方面？我想不是这样的。我的同事和我更喜欢MyComponent1的语法，因为它比较短。但是当阅读React online（特别是在博客文章和开源项目中）时，我们几乎只看到MyComponent2的语法。这只是风格上的不同吗？

我相信这都是关于TS编译器性能的

看看TS：

添加类型注释，尤其是返回类型，可以为编译器节省大量工作。在某种程度上，这是因为命名类型往往比匿名类型（编译器可能会推断）更紧凑，这减少了读取和写入声明文件所花费的时间（例如，对于增量构建）。类型推断非常方便，因此无需普遍进行，但是，如果您已经确定了代码的一个缓慢部分，那么尝试使用它可能是一件有用的事情

请记住，我说的是TS编译器的性能，而不是代码的性能

无论如何，所有函数都将编译为：

导出功能MyComponent 1（道具）{
//对虚拟DOM使用挂钩和返回元素。
//为简洁起见省略。
}
导出常量MyComponent2=（道具）=>{
//对虚拟DOM使用挂钩和返回元素。
//为简洁起见省略。
};

根据TS wiki，添加返回类型使编译器更快一些

因此，您可以使用：

export const MyComponent2:React.FC=（props:ComponentProps）=>{
//对虚拟DOM使用挂钩和返回元素。
//为简洁起见省略。
}

---

如果要减少编译时间

请注意，如果使用的是

FC

，则无需重复

（props:PropType）

中的类型。我认为“经典”函数和箭头函数之间的区别是相同的，不管框架是什么：

this

关键字的行为。因此，我和我的同事倾向于使用箭头函数。@谢谢您的解释。你介意我问你为什么要在函数组件或自定义钩子中使用

这个

？我从来没有遇到过这样做的需要。我认为到目前为止，我们从未在函数组件中使用过

this

（我想不出任何用例），但我们在控制器公开的定制挂钩中使用了它。鉴于函数类型

React.FC

包括返回类型，我认为这不适用；我不希望

export-const-mycomponent 3:React.FC=（props:ComponentProps）：JSX.Element=>…

的编译速度比

export-const-mycomponent 3:React.FC=（props）=>…

快（编译器不需要推断返回类型，只需验证它）但它肯定更适合类型化。@jonrsharpe如何：

添加类型注释，特别是返回类型，可以为编译器节省大量工作。

？与从其他非类型化函数推断返回类型相比，它节省了大量工作，但这里并不是这样。函数有一个类型，有一个返回类型；是

FC

@jornsharpe我明白你的意思了，你完全正确。我没想过

FC

本身已经有返回类型。谢谢你指出这一点！但是现在第一部分与OP的要求完全无关。如果它们有

函数MyComponent1（props:ComponentProps）：JSX.Element{…

与

函数MyComponent3（props:ComponentProps）{…

可能相关，但它们的两个示例都有返回类型。那么它们的两个选择在编译器性能上是否有差异？