javascript - React 元素和粗箭头函数

Question

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

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

我在玩弄一个新的示例应用程序，并在上面的代码中输入了大括号而不是圆括号，如下所示:

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

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

Answer 1

长话短说

你的第一个例子或多或少等同于:

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');

或者这个

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

最后四个例子是等价的。希望对您有所帮助!