-js-反應「組件確實掛載」示例

Question

我試圖開始反應。檢查了代碼示例後，我遇到了一件非常奇怪的事情。這是鏈接[React tutorial]。這是生命週期部分的代碼;

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

那麼，在設置爲什麼使用箭頭函數的時間間隔？我嘗試了其他方式（this.tick（）本身），但它沒有按預期工作。

Answer 1

的setInterval需要傳遞一個函數引用，所以你可以寫

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

這不運行this.tick，它只是告訴setInterval的時候選擇運行打勾。箭頭函數將「this」綁定爲您的組件。

然而setInterval( function() { this.tick(); }, 1000 );不綁定這是您的組件，所以你需要寫setInterval(this.tick.bind(this), 1000 );

如果你寫 setInterval( this.tick(), 1000 );它傳遞給setInterval之前然後勾選運行，並剔的返回值是什麼將由setInterval使用。

我希望清楚。 setInterval只是想引用該函數:)