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

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

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

它们之间存在更多差异，但是在React中进行编码时（例如使用arguments，new等），它们很少是相对的。

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

Answer 2

没有实际区别。

箭头允许跳过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 3

取决于您，我想第一个更具可读性，但是第二个使您可以在返回JSX之前定义一些变量，例如：

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

React功能组件的功能或粗箭头？

3 个答案: