React - 箭头函数语法

Question

长话短说，在 React 中工作时，有些情况下我必须使用 () 而不是 {} 的箭头函数，反之亦然。

const foo = (item) => ( ... );

和

const foo = (item) => { ... };

我的代码经常失败，因为我混淆了它们。我想了解的是这两个箭头函数之间的区别。两者的最佳情况是什么？

非常感谢！

Answer 1

不确定我是否理解正确，但是：

const oneLiner = (param) => myArr.filter().map();

const twoLiner = (param) => {func1(); func2();}

如果您可以将所有内容（如映射或过滤）放在一行中，则您的函数主体不需要任何括号。如果您需要多行，请使用 {}。

此外，oneLiner return 是一个值，即使没有 "return"。第二个函数确实需要关键字 "return" 到 return something.

Answer 2

箭头函数不带大括号return函数表达式。示例：

() => 'Hello world';

与

一样

function() {
  return 'Hello world';
}

如果使用花括号，可以添加多个语句。示例：

() => {
  const str = 'Hello world';
  return str;
}

将执行与以下操作相同的操作：

function() {
  const str = 'Hello world';
  return str;
}

有关详细信息，请参阅 MDN docs。

一些额外的注意事项：

由于语法规则，当你想 return 箭头函数中的对象时，你必须将它括在大括号中：

() => ({
  key: 'value',
  another_key: 'another_value'
});

function() 和 () => ... 之间的主要区别是箭头函数没有绑定到某些关键字（如 this）并且箭头函数 don 't 有一个原型，不能用作构造函数。

React - arrow function syntax