javascript - javascript 函数中的 () 和 {} 有什么区别？

Question

<分区>

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

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

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

此函数(组件只是函数)返回 <div>隐式元素。但是，使用 {} ，你可以做一些中间计算而不是马上返回:

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