时间戳

首页 > 解决方案 > 如何声明一个反应 js 声明函数？

javascript - 如何声明一个反应 js 声明函数？

问题描述

声明函数的方式有很多种，有的以分号结尾，有的不以分号结尾。我想知道有什么区别：

一种

  addUser = id => {
    this.setState(// ...);
  };

乙

selectTask(option) { this.setState({task: option}); }

标签： javascriptreactjs

解决方案

这与 Javascript 更相关，然后是 React 本身。

第一个是函数表达式，建议使用分号，因为我们可能会遇到一些边缘和奇怪的情况。例子：

const foo = function() {
  console.log("first");
};

// Do not bother with this function too much, it is here to mimic our error,
// and does not have to be an arrow function.
(() => console.log("second"))();

我们期望在这里看到second输出，如果你运行它，我们实际上会看到。如果我们在第一个表达式中省略分号怎么办？

const foo = function() {
  console.log("first");
}

(() => console.log("second"))();

这里发生的情况是，因为我们省略了分号，所以我们的第二个 iife 函数被考虑为我们第一个函数的参数并且我们的第一个函数被执行，但这不是我们在这里想要的。

但是，对于函数声明，这是不同的。

function foo() {
  console.log("first");
}

(() => console.log("second"))();

是否省略分号，结果是一样的：我们看到second的是输出，这就是我们所期望的。因此，这里不推荐使用分号。

现在，箭头函数有点不同。实际上它们是函数表达式，可以有两种体型。一个简洁的表达式，只有一个表达式并且返回是显式的。另一个是主体块，需要返回。现在，请耐心等待，因为这里有不同的情况。

const foo = () => console.log("first");


( () => console.log( "second" ) )();

这里我们有简洁的主体，带有分号的单个表达式。一切都如预期的那样，我们看到了“第二”。但是如果我们省略分号：

const foo = () => console.log("first")


( () => console.log( "second" ) )();

它什么也不做，因为在我们的箭头函数中有一个明确的返回。现在使用带有分号或不带分号的常规正文块：

const foo = () => { console.log("first") }


( () => console.log( "second" ) )();

它被视为函数声明，我们的结果不会改变。实际上，我不确定我对“视为函数声明”的解释，如果有人纠正我，我会很高兴编辑我的答案。

推荐阅读