如何在 setState 之后在 React 中強制立即更新 DOM（即提交）？

Question

我有一個帶有按鈕的 React 組件（顯示“加載數據”）和幾個子組件，每個子組件都采用一組數據並將它們繪制成圖形，並且渲染速度相對較慢（Highcharts）。

單擊該按鈕時，需要執行以下操作：

1. 將文本從“加載數據”更改為“加載...”（基於 this.state.isLoadingData）
2. 將空數組傳遞給子組件（以便它們清除最后加載的數據）
3. 向服務器發送請求以獲取數據
4. 收到響應后，將服務器數據傳遞給子組件（以便他們繪制新數據圖表）

這是按如下方式完成的：

// Make button show "Loading Data..."
this.setState( { isLoadingData: true } ); // I want DOM to update immediately after this
// Clear charts in child components
this.setState( { data: [] }, this.loadDataFromServer ); // This causes child components to re-render (a bit slow)

this.loadDataFromServer 將執行以下操作：

// Chart the new data in child components
this.setState( { data: newData, isLoadingData: false });

最終發生的是按鈕和子組件同時更新，這會在按鈕從“加載數據”變為“加載...”時引入可察覺的 UI 延遲。 在我看來，雖然在每個 setStates 之后都會調用 render()（console.log() 證明了這一點），但 React 會批處理實際的 DOM 提交，以便僅在兩個 setStates 都完成后才更新 DOM。

有什么建議么？

請注意，setStates 本身的批處理不是問題，因為我什至嘗試過這個，但對主要問題沒有任何影響：

this.setState( { isLoadingData: true }, () => {
  this.setState( { data: [] }, this.loadDataFromServer )
}

Answer 1

通過實驗，我發現使用setTimeout （即使延遲為 0）會導致 React 以我想要的方式提交給 DOM。 IE

this.setState( { isLoadingData: true } );
setTimeout(() => {
  this.setState( { data: [] }, this.loadDataFromServer )
}, 0);

Answer 2

為什么不將數據設置為空數組並同時將isLoadingData設置為true。然后下一步：this.loadDataFromServer就像這樣

    this.setState( { isLoadingData: true,data: []  } ); 
    setTimeout(() => {
     this.loadDataFromServer
    }, 0)