javascript函数中的()和{}有什么区别？ [复制]

Question

这些函数似乎在 React 教程中可以互换使用，但无法弄清楚区别......或者何时使用哪个？

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

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

Answer 1

这些是根本不同的。以前的箭头函数语法 () => {} 允许您在箭头函数的主体内拥有多个语句，即：

() => {
  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>
);

此函数（组件只是函数）隐式返回<div> 元素。但是，使用{}，您可以进行一些中间计算，而不是立即返回：

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

Answer 2

arrow function 和 const fn = () => { ... } 创建一个代码块，您可以在其中包含多行代码。但是对于这种情况，您需要有一个 return 声明。

带有const fn = () => ( ... ); 的箭头函数支持单行代码并且return 语句是隐式的。函数周围的括号是可选的，因此您的函数可能看起来像

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

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

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