setInterval function 无箭头 function

Question

我正在学习文档https://facebook.github.io/react/docs/state-and-lifecycle.html之后的反应组件

为什么我们需要在这里使用箭头 function：

this.timerID = setInterval(() => this.tick(), 1000);

为什么我不能只说（显然它不起作用）

this.timerID = setInterval(this.tick(), 1000);

Answer 1

setInterval的第一个参数是function类型。 如果你这样写：

this.timerID = setInterval(this.tick(), 1000);

...然后你不传递函数，而是立即执行函数this.tick然后传递该函数调用返回的值作为参数。

你可以这样写：

this.timerID = setInterval(this.tick, 1000);

如果省略括号，则传递对this.tick函数的引用，然后在 1000 毫秒后由setInterval执行。

Answer 2

setInterval将函数作为第一个参数，在第二种情况下它获取返回值

将其更改为

this.timerID = setInterval(this.tick.bind(this), 1000);

或

 this.timerID = setInterval(() => this.tick(), 1000);

当您想将函数绑定到 React 上下文时，这可能是您所需要的。

请参阅有关为什么需要在 React 中绑定函数的答案

如果你不这样做，你可以简单地写

this.timerID = setInterval(this.tick, 1000);

Answer 3

为什么这里需要使用箭头函数

答案很简单：查看实时脚本示例中的结果...

 class Persons{ scopeOne(){ // your will see the result this will display our current object 'Persons' setInterval(function(){ console.info(' SCOPE ONEo : '+this); },3000); } scopeTwo(){ setInterval(function(){ console.info(' SCOPE TWO : '+this); }.bind(this) ,3000); } scopeThree(){ setInterval(() => { console.info(' SCOPE THREE : '+this) },3000); } } let p = new Persons(); p.scopeOne(); p.scopeTwo(); p.scopeThree();

在第一个范围中，结果是WINDOW OBJECT，因此我们无法访问我们当前的类范围，因此在第二个范围中，我们将范围与 bind(this) 一起使用，这有助于绑定我们当前的对象范围，在第三个范围中，它与调用当前对象的第二个范围相同....

Answer 4

将名为 Tick 的 function 转换为具有匿名 function 的变量，因此您可以将其作为不带括号的参数传递。

以此代码（ https://codepen.io/gaearon/pen/amqdNr?editors=0010 ）为基础，您可以像这样更新：

 componentDidMount() {
    this.timerID = setInterval(this.tick,1000);
  }

  tick = () => {
    this.setState({
      date: new Date()
    });
  }

Answer 5

您需要提供一个函数引用，您正在尝试调用一个函数，除非该函数返回一个函数引用，否则您的代码将无法工作

它应该看起来像这样

this.tick = function() { .... }

this.timerID = setInterval(this.tick, 1000);

Answer 6

如果您没有使用箭头函数，那么您的代码应该如下所示：

this.timerID = setInterval(function(){ this.tick() }, 1000);

Answer 7

对此的简单回答是，tick 函数需要能够访问其 use/ this的上下文，也就是 Clock 组件。 换句话说，它需要绑定到 Clock 组件，以便它在 Clock 组件的上下文中工作，而不是在 Clock 组件之外的全局上下文中工作。

React 类中的函数默认不绑定，绑定失败将返回undefined而不是预期的结果。

有几种方法可以将滴答函数绑定到 Reactjs 网站上的 Clock 组件示例。

1. 箭头函数可以访问this ，这就是在示例中使用它们的原因。 换句话说，隐式编写箭头函数意味着它将其内容绑定到本地上下文（在本例中为 Clock 组件）。 在这篇Medium 文章中阅读更多相关内容

2. 在构造函数中绑定tick函数

class Clock extends React.Component{
 constructor(props){
   super(props);
   this.state={date: new Date()}
   this.tick=this.tick.bind(this)
 }

3. 在setInterval方法中绑定tick函数

 componentDidMount() {
    this.timerID = setInterval(this.tick.bind(this),
      1000
    );
  }

Answer 8

从技术上讲，如果this.tick()返回一个函数，您应该能够使用第二个代码片段。