2017-06-19 120 views
1

我正在修改此文件https://github.com/davidguttman/react-pivot/blob/master/index.jsx#L84以將Dimensions組件移出到父組件。React必須使用setTimeout調用以正確更新視圖

我注意到的一件奇怪的事情是,我必須撥打setTimeout(this.updateRows, 0)而不是this.updateRows()才能正確更新視圖。

任何想法爲什麼這是這樣嗎? AFAIK,setTimeout(_,0)只是簡單地使函數調用異步(即允許併發執行性能)。爲什麼這將有助於正確渲染視圖?我問這個問題,以避免「巧合編程」。

回答

1

這是因爲setState is asynchronous

由於您正在從this.stateupdateRows函數中讀取,所以在狀態實際更新之前它將不起作用。 像你一樣使用setTimeout是允許狀態更新的一種方法。將完成setState,然後updateRows將在下一幀中執行。

一個更好的辦法是使用的setState

this.setState({dimensions: updatedDimensions},() => { 
    this.updateRows(); 
}); 

另一種選擇是保留任何狀態變化的一個對象,並把它傳遞給函數,而不是直接從this.state讀取回調參數,但可以導致更復雜。

1

在這種情況下,它可能不太「關於併發執行」,更多關於event loopsetTimeout調用從當前調用棧中刪除函數執行,並將一個條目添加到消息隊列中。當前正在執行的堆棧將在隊列中的下一條消息開始執行之前運行完成。

我不知道爲什麼在這個特定的實例中需要這樣做 - 在updateRows需要產生所需結果的當前棧中必須設置某種狀態。

相關問題