React 元素和粗箭头函数

在 Redux 示例中，使用的语法是：

const App = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)

我正在摆弄一个新的示例应用程序，并用大括号而不是圆括号错误地输入了上面的代码，如下所示：

const App = () => {
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
}

我控制台记录了以下两个内容，结果似乎是相同的。我的问题是这两者之间有什么区别，为什么 React 喜欢括号而不是大括号？

TL;DR

您的第一个示例或多或少相当于：

var App = function() { return <div>...</div>; };

你的第二个或多或少相当于：

var App = function() { <div>...</div>; };

React 可能会抱怨第二个示例中没有返回任何内容。

稍长版本

让我们把 React 排除在外。在 es6 中，你可以创建一个粗箭头函数，如下所示：

const getWord = () => {
  return 'unicorn';
}

我们有一个捷径可以用更少的代码完成同样的事情：

const getWord = () => 'unicorn';

unicorn即使您没有显式键入也会返回return任何地方。

在第一个示例中，您将 JSX 括在括号中。我们的简单示例中的等效项是：

const getWord = () => ('unicorn');

or this

const getWord = () => (
  'unicorn'
);

最后四个示例是等效的。希望有帮助！