使用括号而非花括号的箭头函数语法？

Question

我在一个React教程中看到了这段代码片段:

const App = ({title}) => (
  <div className="header">{title}</div>
);

乍一看，我以为这将一个箭头函数分配给App常量。然后我注意到它没有使用花括号，而是用了括号。

我知道箭头函数应该是(...) => {...}，但在这里它使用了(...) => (...)。

那么，它是箭头函数还是其他类型的函数？如果它是箭头函数，为什么会有另一种形式？我如何决定使用哪种形式？如果不是箭头函数，JavaScript中这种函数类型叫什么？

- Leem

---

这是一个隐式返回。 - Joseph

1. 是的。
2. 为什么不呢？
3. 这取决于你，如果你不能立即返回一个值，那么大括号是必需的。
4. 不适用。

- jonrsharpe

(...args) => expr 相当于 (...args) => { return expr; } — 这是一种常用格式的快捷方式。 - Amadan

你有查看箭头函数文档吗？ - claudiu.nicola

Answer 1

是的，这也是一个箭头函数。唯一的区别在于，如果您不使用大括号，它会强制返回：

const App = () => { return true; } // with braces you've to use the return statement

const App = () => true; // without braces it forces the return statement automatically

MDN箭头函数表达式文档对this的解释如下：

Function body

Arrow functions can have either a "concise body" or the usual "block body".

In a concise body, only an expression is specified, which becomes the implicit return value. In a block body, you must use an explicit return statement.

var func = x => x * x;
// concise body syntax, implied "return"

var func = (x, y) => { return x + y; };
// with block body, explicit "return" needed

此外，关于括号：在这种情况下，箭头函数返回一个JSX表达式，被认为是单个对象。括号通常用于多行JSX代码。更多信息请参见：https://reactjs.org/docs/introducing-jsx.html以及 Stack Overflow 上的其他类似问题。

- kosmosan

---

第二种形式仅适用于单个表达式 - 无法使用语句。 - Amadan

@Amadan的评论补充了答案。这是一个很好的观点。 - kosmosan

如果我的箭头函数在返回之前有多行逻辑，我应该使用花括号还是圆括号？您能直接回答这个问题吗？ - Leem

@Leem 如果是这样，你显然没有选择；你必须使用大括号，因为你需要函数的主体而不仅仅是返回值。 - jonrsharpe

Answer 2

当你使用以下语法时：

const a = ({ foo }) => ( <Component /> );

这意味着括号内的代码本质上是被返回的。也就是说，箭头函数强制返回。而这种语法：

const b = ({ bar }) => {
  some();
  thing();
};

这将指示执行的操作，但不返回任何内容。也就是说，必须存在'return'关键字才能从函数中返回任何内容，如下所示：

const c = ({ baz }) => { return <AnotherComponent />; }

第一个和第三个例子带有返回值（隐式或显式）对于可重用的函数和/或组件非常有用。中间那个没有返回值的例子则更适用于状态管理（例如mobx/redux/flux），在这种情况下，您需要实现HOF或返回状态或对象的函数。

- rrd