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

带有const fn = () => { ... }的{{3}}创建一个代码块，您可以在其中包含多行代码。但是，在这种情况下，您需要具有返回声明。

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

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

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

本质上，两者都做相同的事情。但是，如果您只需要一个语句，则编写箭头函数的后一种方法可使您的代码更加简洁。

javascript函数中的（）和{}有什么区别？

2 个答案:

反应