在脚本函数中 （） 和 {} 之间有什么区别？[重复]

Question

这些函数似乎在 React 教程中可以互换使用，但无法找出区别...或者什么时候使用哪个？

const SomeVal = () => {
    ...
}

const SomeVal = () => (
    ...
)

Answer 1

带有< code>const fn = () =的箭头函数

带有< code>const fn = () =的箭头函数

const sum = (a, b) => a + b;
const sum2 = (a, b) => (a + b);

const sumBlock = (a, b) => { return a + b; }

本质上，两者都做同样的事情。但是，如果只需要一条语句，后一种编写箭头函数的方法可以使代码稍微简洁一些。

Answer 2

这些是根本不同的。以前的箭头函数语法 （） =

() => {
  console.log('Hello!');
  return 'World!';
}
// When called, this logs Hello! and returns World!

但后者，（） =

() => (
  'World' // only one expression that is implicitly returned
  // Would work fine without parentheses (unless you want to return an object!)
)
// When called, this function returns 'World'

当然，您也可以创建一个不可读的箭头函数，该函数使用逗号运算符执行多个操作：

() => (console.log('Hello!'), 'World!')

我假设您在React无状态组件中看到了这一点：

const Comp = () => (
  <div>Hello World!</div>
);

此函数（组件只是函数）返回

const Comp = () => {
  const msg = 'Hello World!';
  return ( // Need to explicitly return here
    <div>{msg}</div>
  );
}