React組件延遲頁面加載

我的父組件中有兩個子組件，CompA和CompB。第二個組件執行大量數據處理（也爲此調用了許多其他組件），這會延遲整個頁面加載時間。這會導致我的Spinner在一段時間後卡住。有沒有其他的方法來檢查CompB是否已準備好渲染，然後渲染它，而頁面已經加載了CompA？React組件延遲頁面加載

return(
    <div> 
     <CompA 
     info = {info} 
     /> 
     <CompB 
     data = {data} 
     /> 
    </div>

感謝所有幫助

來源

2016-08-22 Casper Babypants

聽起來像你的組件B正在做很多一些同步的東西？可能會顯示更多的代碼.. – Hardy

確實，它將數據傳遞給多個組件，它使用D3呈現SVG。同時，繪製軸的許多計算也都在減速。特別是當傳遞多個數組超過10000個項目時。不能添加額外代碼的道歉原因有多個組件，但是如果有任何其他想法延遲CompB加載到父組件會非常有幫助。 –

嘗試在'setTimeout'中包裝很重的部分。 – Hardy

你總是會遇到一些缺乏響應如果你在JavaScript中主線程重計算。這可能導致您正在經歷的延遲渲染，或者例如並不是按鈕和其他用戶輸入的最佳響應。

解決方案是將計算移出組件並從主線程移出以將其釋放以進行渲染工作。您最初可以將CompB呈現爲空白/掛起/加載狀態，並在您想要顯示的數據準備就緒後再更新。

要移動計算出的主線程，你有多種選擇，其中兩個是

using Web Workers在客戶端上的背景進行計算，並
在異步執行計算後端並通過Web服務傳遞輸入和輸出。

來源

2016-08-22 20:32:04 Timo

React組件延遲頁面加載

回答

相關問題