Question

我正在学习文档https://facebook.github.io/react/docs/state-and-lifecycle.html

之后的反应组件

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

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 takes function as first argument, in the second case it is getting a returned value

Change it to

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

or

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

which is probably what you need when you want to bind the function to the React context.

See this answer on why you need to bind functions in 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 （WINDOW对象），因此我们无法访问当前的类作用域因此，在第二个作用域中，我们将scope与bind（this）结合使用，这有助于绑定当前对象的作用域，第三，与第二个作用域调用当前对象的作用相同。...

Answer 4

你需要提供一个函数引用，你试图调用一个函数，除非该函数返回一个函数引用，你的代码将不起作用

应该是这样的

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

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

Answer 5

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

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

Answer 6

一个简单的答案是，滴答功能需要能够访问其use / this（它是Clock组件）的上下文。换句话说，它需要绑定到Clock组件，以便它可以在Clock组件的上下文中工作，而不是在Clock组件之外的所有全局上下文中工作。

React类中的函数默认情况下未绑定，如果无法绑定该函数，则会返回undefined而不是预期的结果。

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

箭头函数可以访问this，这就是在示例中使用它们的原因。换句话说，隐式地编写箭头函数意味着将其内容绑定到本地上下文（在这种情况下为Clock组件）。进一步了解此Medium article
在构造函数中绑定tick函数

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

在setInterval方法中绑定刻度线功能

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

Answer 7

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

setInterval函数没有箭头功能

7 个答案: