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函数（即上下文，堆栈跟踪，return关键字等）的差异可能会影响您对函数的使用方式。但是我纯粹是在React组件方面问这个问题。

Answer 1

没有实际区别。

箭头允许跳过return关键字，但不能从提升中受益。这导致 ES6 目标的输出较少，但转译为 ES5 时输出较多，因为函数被分配给变量：

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

压缩和未压缩的 JS 文件的开销是 6 个字节，这个考虑一般可以忽略。

由于优化，导出箭头时不一定会出现冗长的情况：

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

Answer 2

主要是喜好问题。但是，存在一些（微小的，几乎无关紧要的）差异：

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

• 粗箭头语法不会创建 的新上下文this，而 ES5 函数会。当您希望this在函数内部引用 React 组件或想要跳过该this.foo = this.foo.bind(this);步骤时，这会很有用。

它们之间存在较大差异，但在作出反应时编码（例如，使用他们很少相对arguments，new等）。

就个人而言，我尽可能使用粗箭头语法，因为我更喜欢这种语法。