Question

有许多不同的方式来声明一个函数，有些以分号结束，而另一些则没有。我想知道区别是什么：

A

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

乙

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

Answer 1

选项A：被称为箭头功能 箭头函数不会在其函数体中重新定义 this 的值。这使得在作为回调传递时更容易预测其行为，并防止在回调中使用 this 导致的错误。由于它是箭头函数或函数表达式，因此需要以分号结尾。

选项B：正常功能需要此和绑定才能在回调中使用。它是一个函数声明语句，因此不需要分号。

重要：避免使用箭头函数并在render中绑定渲染。

Answer 2

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

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

＆＃13;

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"))();

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

省略分号或不分号，结果是一样的：我们看到second作为输出，这就是我们所期望的。因此，不建议使用分号。

现在，箭头功能有点不同。实际上它们是函数表达式，可以有两种体型。具有单个表达式和返回的简明表达是明确的。另一个是身体阻滞，需要回归。现在，请耐心等待，因为这里有不同的情况。

＆＃13;

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

＆＃13;

这里我们有简洁的身体，一个带分号的表达式。一切都如预期，我们看到＆＃34;第二＆＃34;。但是如果我们省略分号：

＆＃13;

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

＆＃13;

它没有做任何事，因为我们的箭头函数有明确的返回。现在使用带分号的常规体块：

＆＃13;

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

＆＃13;

它被视为函数声明，我们的结果不会改变。实际上，我并不安静地确定我的解释＆＃34;被视为功能声明＆＃34;如果有人纠正我，我将很乐意编辑我的答案。

Answer 3

如果我们在渲染中绑定，那么我们不需要以分号结束点击我其他 this.handleClick = this.handleClick.bind（this）;

如何声明react js声明函数？

3 个答案: