javascript - React 中带有箭头函数的 SetInterval 和回调

Question

我有一个使用 setInterval 的 React 组件。我希望能够在 setInterval 内使用组件的 this 但 this 成为 setInterval 内的窗口，然后 this 变为 undefined 在回调中。

两者都是箭头函数，所以这对我来说感觉出乎意料，但可能存在我目前尚未意识到的内部工作原理。

示例如下:

class MyComponent extends React.Component {
  constructor(){
    super()
    this.hasEndedTimer = this.hasEndedTimer.bind(this)
    ...
    this.hasEndedTimer(()=>{
      // the callback 'this' is now undefined? Even though an arrow 
      function?    
    })      
  }
...
  hasEndedTimer(callback) {
    const intervalId = setInterval(() => {
      // 'this' is now the window instead of the component? Even though arrow
      if(somecondition()) callback()
    }, 1000)
  }

...
}

我可以在 setInterval 中维护 React 组件的 this 上下文吗？

注意:如果我将 setInterval 中的箭头函数更改为绑定(bind) this 的匿名函数，则 this 上下文仍然是组件.

  hasEndedTimer(callback) {
    const intervalId = setInterval((function() {
      // 'this' is now the component. Works as expected.
      if(somecondition()) callback()
    }).bind(this), 1000)
  }

Answer 1

希望这对您有帮助。

构造函数必须有 super()。

react 组件没有这个表达式对象。它必须从父组件获取它。所以必须使用 super() 来获取它。

并且需要在构造函数中绑定(bind)hasEndedTimer。

如果忘记绑定(bind)this.handleClick并传递它，实际调用函数时this将是未定义的。

this.hasEndedTimer = this.hasEndedTimer.bind(this)

如果使用箭头函数，则不需要绑定(bind)(this)。

关于setInterval中的这个，是不一样的。

“This”通常指向window或global。当this需要指向类实例时，我们应该使用bind将this绑定(bind)到回调。就像这样

declare (){
  console.log(...);
};
setInterval(this.declare.bind(this), 1000);

所以，你在setInterval中设置的函数实际上是一个回调函数，并且可以使this指向类实例。所以“this”效果很好。

关于箭头功能。

箭头函数本身没有this，它必须从作用域链的上层继承。并且不需要使用bind。您定义“this.hasEndedTime”箭头函数的方式有问题。

this.hasEndedTimer = ()=>{
   ...  
}
//how to use it 
this.hasEndedTimer()

箭头函数中的setInterval要注意函数内部的“this”。

“This”内部函数是固定的，指向未使用的定义范围。这是一个示例。

function Timer() {
  this.s1 = 0;
  setInterval(() => this.s1++, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);