箭头函数语法用括号而不是花括号？

Question

我在React教程中看到了一段代码：

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

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

我理解箭头函数应该是(...) => {...}，但这里它使用(...) => (...)

那么，它到底是不是箭头函数呢？如果是的话，为什么还有另一种形式？我如何决定何时使用哪种表格？如果不是的话，这个函数类型在js中调用的是什么？

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箭头函数表达式文档对此有如下说明：

函数体

箭头函数可以有“简洁体”或通常的“块体”。

在简洁的主体中，仅指定一个表达式，该表达式成为隐式返回值。在块体中，必须使用显式 return语句。

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 以及有关堆栈溢出的其他类似问题。