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

Answer 2

使用语法时：

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

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

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

这将指示已执行的动作，但未返回任何内容。也就是说，必须使用'return'关键字，函数才能返回任何内容，例如：

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

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

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

2 个答案: