首先来复习一下 JS 里几种声明的方法

1. 在大部分语言中都存在的标准声明方法：

   function func() {
   	...
   }
   

2. 函数表达式（Function Expression）：

   let func = function() {
   	...
   }; // 别漏了分号
   

3. 箭头函数：

   let func = () => {
   	...
   };
   

区别

1. 其中 2 和 3 都是在执行到时才可用，只有第一种可以在其声明位置之前使用。

2. 箭头函数没 this ，此外也没有 arguments，也不可用 new 来 call 它。而且也没有 super。

   let user = {
     firstName: "Ilya",
     sayHi: () => alert(this.firstName),
   };
   user.sayHi(); // undefined
   

   上面写在 Object 里面，这里 this 会指向 Window。

3. 感觉 2 和 3 是一样的，实际上 2 是有 this 的。

   let user = {
     firstName: "Ilya",
     sayHi: function () { alert(this.firstName) },
   };
   user.sayHi(); // Ilya
   

4. 如果使用 const 声明，相比标准方法可以保证函数名下的函数不被替换。

使用哪种更好？

如果想使用传统的在声明之前就可以使用的函数，那只能选择第一种。

如果觉得箭头函数更加好看，那就用它吧，但注意处理好 this，对于在 object 中的箭头函数，给他包上一层 function 吧，或者干脆使用普通的函数表达式。

如果要用 TS 的话推荐使用箭头函数，这样可以把 Props 和返回值的类型写在一起，type 的定义也会方便一些，详见 React + TypeScript。

Ref:

Proper use of const for defining functions

Functions

Function expressions

Arrow functions, the basics