React--點擊一個按鈕後，計時器開始計時秒數

我正在用React構建一個小遊戲，並且我設置了一個倒數計時器。React--點擊一個按鈕後，計時器開始計時秒數

關於如何使用React創建計時器或倒數計時器，有許多教程（包括React官方文檔中的一個）。但它們都使用componentDidMount和componentWillUnmount生命週期方法來設置和分別清除間隔。

這工作正常，但定時器開始計算組件掛載的時刻。我想有一個計時器，開始計算onClick。

什麼是實現這種行爲的合適的生命週期方法？我已經試過componentWillUpdate和componentDidUpdate但沒有效果。

我的第一個想法是使用gameOn狀態屬性爲了激活計時器只有當遊戲開啓（即開始按鈕已被按下），但這不起作用，因爲（我猜）我設置gameOn爲真，在組件didMount之後很久。

我也試圖在Timer組件上隨同適當的狀態（{secondsElapsed：0}）一起移動這兩個方法，因爲Timer是一個獨立的組件，通過道具與其父組件通信。這也沒有運氣。

最後，我嘗試在我的構造函數上設置this.interval = null;，但這在Timer的運行方式上沒有任何區別。

我在想這個問題的根源是生命週期方法，因爲這些控件在調用setInterval和clearInterval的時候會被調用。所以我的問題是這樣的：

我應該使用哪種生命週期方法的其他組合來實現我所追求的行爲？

任何精通的建議將不勝感激。

獎勵積分，如果你能清楚地解釋爲什麼我應該在構造函數中聲明this.interval = null;。

爲了什麼我到目前爲止的例子，確實基本上看「A Stateful Component」

來源

2017-08-09 alexandros84

您可以隨時啓動的時間間隔你只想不要忘記清除它們的任何方式。在反應生命週期中，清理事物的最佳位置是在'componentWillUnmount'期間。爲什麼？因爲你想確保時間間隔一直被清除。 – Jalil

等一下，不會這樣的情況與componentDidUpdate以及？ – alexandros84

這不是一個理想的地方，因爲組件更新的因素很多。可能您希望它通過事件（onClick）或卸載時觸發/清除。 – Jalil

componentWillUnmount() { 
    clearInterval(this.interval); // Always clean up before unmounting 
} 

render(){ 
    <div> 
    <button 
     onClick={() => { this.interval = setInterval(() => { 
     // Do something here e.g. increment the time 
     // NOTE: `this` keyword here refers to the component itself 
     }, 1000); }}> 
     Start 
    </button> 
    </div> 
}

來源

2017-08-09 03:24:19

這裏的問題是，onClick函數在父組件上，但我想在涉及到componentWillUnmount（）時引用Timer組件（）...我有四個組件（main，start，action和timer）。 main是啓動的父項並啓動操作和定時器的父項。 – alexandros84

你能否進一步解釋你要訪問什麼屬性，應該在哪裏訪問以及從哪裏訪問？ –

這實際上工作。我不知道可以從onClick函數設置this.interval。應該考慮一下，但是這個關於使用生命週期方法的教程堅持讓我迷失方向。獎勵！ – alexandros84

React--點擊一個按鈕後，計時器開始計時秒數

回答

相關問題