React函数组件：使用函数关键字还是箭头函数？

Question

我不禁想知道在使用纯函数和箭头函数作为React函数组件时是否有任何优势。

const MyMainComponent = () => (
  <main>
    <h1>Welcome to my app</h1>
  </main>
)

function MyMainComponent() {
  return (
    <main>
      <h1>Welcome to my app</h1>
    </main>
  )
}

它们都可以正常工作，但有没有一种推荐的方法来编写它们？有哪些支持其中一种方法的论点吗？

编辑：我知道在使用普通的JavaScript函数时（即上下文、堆栈跟踪、返回关键字等），可能会对函数的使用方式产生影响。然而，我纯粹是就React组件的角度提出这个问题。

- Dispix

---

我一直在关注这个PR，看看Dan对这个问题是否有更多的意见：https://github.com/gaearon/overreacted.io/pull/130 - wmp224

React 方面没有区别。这一切都归结于箭头函数和函数之间的一般 JS 区别。因此，与 this 上下文的差异、提升等方面有所不同。 - quirimmo

清晰度、重用性、一致性、绑定注意事项...这是首选的。这与使用任何其他函数或箭头函数相同。 - zfrisch

Answer 1

没有实际的区别。

箭头函数允许省略return关键字，但不能从提升变量声明中受益。这导致在使用ES6目标时输出较少冗长的内容，但在转译为ES5时输出更多冗长的内容，因为函数被赋给了一个变量：

var MyMainComponent = function MyMainComponent() {
  return React.createElement(
    "main",
    null,
    React.createElement("h1", null, "Welcome to my app")
  );
};

压缩后未经gzip的JS文件开销为6个字节，这种考虑通常可以忽略。

当箭头被导出时，冗余不一定存在，这是由于优化所致：

var MyMainComponent = (exports.MyMainComponent = function MyMainComponent() {
  return React.createElement(
    "main",
    null,
    React.createElement("h1", null, "Welcome to my app")
  );
});

- Estus Flask

Answer 2

这主要是个人喜好的问题。然而，有些（微小、几乎可以忽略不计的）区别：

• 使用箭头函数语法时，如果你直接返回 JSX，而没有先前的表达式，则可以省略大括号和return关键字。而 ES5 函数则必须使用 { return ... }。

• 使用箭头函数语法时，它不会创建一个新的this上下文，而 ES5 函数会创建这样的上下文。当你想在函数内部引用 React 组件时，或者想跳过this.foo = this.foo.bind(this);这一步时，这非常有用。

它们之间还有更多的区别，但在编写 React 代码时它们很少相关（例如使用arguments, new等）。

就我个人而言，尽可能地使用箭头函数语法，因为我更喜欢那种语法。

- Chris

---

第二项不成立，因为函数式组件没有this。 - Estus Flask

@estus，没错。我指的是箭头函数语法的一般用法（例如用于方法）。 - Chris

使用React Dev工具时，箭头函数组件显示为“Anonymous”，而具名函数显示其函数名。这使得开发变得更加容易。 - etoxin