时间戳

首页 > 解决方案 > React 功能组件的功能或粗箭头？

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

问题描述

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

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

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

两者都可以正常工作，但是有推荐的方法来编写它们吗？有任何支持其中一个的论据吗？

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

标签： javascriptreactjsfunctionecmascript-6

解决方案

没有实际区别。

箭头允许跳过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")
  );
});

推荐阅读