我不禁想知道在 React 函数组件中使用普通函数和粗箭头是否有什么优势
const MyMainComponent = () => (
<main>
<h1>Welcome to my app</h1>
</main>
)
function MyMainComponent() {
return (
<main>
<h1>Welcome to my app</h1>
</main>
)
}
两者当然都可以很好地工作，但是有推荐的方法来编写它们吗？有任何支持其中之一的论据吗？
编辑：我知道纯 javascript 函数（即上下文、堆栈跟踪、返回关键字等）的差异，这些差异可能会对您对函数的使用类型产生影响。但是，我纯粹是在 React 组件方面问这个问题。
没有实际区别。
箭头允许跳过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")
);
});
主要是喜好问题。但是，存在一些（微小的，几乎无关紧要的）差异：
return如果您直接返回 JSX，而没有任何先前的表达式，则粗箭头语法允许您省略大括号和关键字。使用 ES5 函数，您必须拥有{ return ... }.
粗箭头语法不会创建 的新上下文this，而 ES5 函数会。当您希望this在函数内部引用 React 组件或想要跳过该this.foo = this.foo.bind(this);步骤时，这会很有用。
它们之间存在较大差异，但在作出react时编码（例如，使用他们很少相对arguments，new等）。
就个人而言，我尽可能使用粗箭头语法，因为我更喜欢这种语法。