React 功能组件的功能或粗箭头？ [复制]答案

【问题标题】：Function or fat arrow for a React functional component? [duplicate]React 功能组件的功能或粗箭头？ [复制]
【发布时间】：2019-06-17 06:28:56
【问题描述】：

我不禁想知道在 React 函数组件中使用普通函数和粗箭头之间是否有任何优势

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

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

当然两者都工作得很好，但是有推荐的方法来写这些吗？有任何支持其中一个或另一个的论据吗？

编辑：我知道纯 javascript 函数（即上下文、堆栈跟踪、返回关键字等）的差异可能会影响您对函数的使用类型。但是，我纯粹是根据 React 组件来问这个问题。

【问题讨论】：

我一直在看这个 PR 看看 dan 是否有更多关于这个问题的意见：github.com/gaearon/overreacted.io/pull/130
React 端没有区别。这一切都归结于箭头函数和函数之间的一般 js 区别。所以与this 上下文的区别，与提升等的区别
清晰、重用、一致性、约束性警告……这是优先的。与使用任何其他函数或粗箭头函数相同。

标签： javascript reactjs function ecmascript-6

【解决方案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")
  );
});

【讨论】：

【解决方案2】：

主要是偏好问题。但是，存在一些（微小的，几乎微不足道的）差异：

如果您直接返回 JSX，那么胖箭头语法允许您省略大括号和 return 关键字，而无需任何先前的表达式。使用 ES5 函数，你必须有{ return ... }。
胖箭头语法不会创建this 的新上下文，而 ES5 函数会。当您希望函数内部的 this 引用 React 组件或您希望跳过 this.foo = this.foo.bind(this); 步骤时，这可能很有用。

它们之间有更多区别，但在 React 中编码时它们很少是相对的（例如使用 arguments、new 等）。

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

【讨论】：

第二项不是这样，因为功能组件没有this。
@estus，真的。我指的是一般的粗箭头语法（例如方法）。