带括号而不是花括号的箭头函数语法？ [复制]答案

【问题标题】：Arrow function syntax with parentheses instead of curly braces? [duplicate]带括号而不是花括号的箭头函数语法？ [复制]
【发布时间】：2020-06-21 03:01:00
【问题描述】：

我在一个 React 教程中看到了一段代码 sn-p：

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

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

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

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

【问题讨论】：

这是一个隐含的回报。
1.是的。 2. 为什么不呢？ 3. 由你决定，只有当你不能立即返回值时才需要大括号。 4. 不适用。
(...args) => expr 等价于(...args) => { return expr; } — 一种常用格式的快捷方式。
你检查过arrow functions documentation吗？

标签： javascript reactjs

【解决方案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 arrow function expression documentation 对此表示如下：

函数体

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

在简洁的正文中，只指定了一个表达式，它成为隐式返回值。在块体中，您必须使用显式 return 声明。
var func = x => x * x;
// concise body syntax, implied "return"

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

【讨论】：

第二种形式也只能用于单个表达式——不能使用语句。
@Amadan 的评论完成了答案。好点。
如果我的箭头函数在返回前有多行逻辑，我应该使用花括号还是圆括号？你能直接回答这个问题吗？
@Leem 在这种情况下，您显然别无选择；你必须使用大括号，因为你需要函数的body而不仅仅是返回值。

【解决方案2】：

当你使用语法时：

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

这意味着括号内的代码是固有地返回的。即，强制返回的粗箭头。而这个语法：

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

这表示已执行的操作，但没有返回任何内容。即，要从函数返回的任何内容都必须存在“return”关键字，如下所示：

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

第一个和第三个带有返回值（隐式或其他方式）的示例对于可重用的函数和/或组件很有用。中间不返回任何内容对于状态管理（例如 mobx/redux/flux）更有用，您需要实现 HOF 或返回状态或对象的函数。

【讨论】：