反應延遲渲染

假設我有一個用React編寫的選項卡控件組件。只有活動選項卡會呈現更好的性能（如果我渲染所有選項卡，則需要5秒鐘，因爲大約有20個選項卡，每個選項卡都包含大量數據）。當我點擊它們來激活它們時，其他選項卡將被渲染。反應延遲渲染

這個效果非常好，除了一個選項卡。特殊選項卡比其他選項卡要大得多，它包含一個有2000行的表格，所以React需要3秒來渲染它。這會讓用戶體驗變得非常糟糕：單擊選項卡，3秒內沒有任何反應，因爲React正忙於渲染，然後突然出現大表。

沒有反應，我通常這樣做：

把一些負荷指標在新的活動標籤
切換到新的活動標籤
setTimeout(render(), 50);

由於實際呈現發生在50ms後，瀏覽器有足夠的時間更新UI。用戶在點擊它後會立即看到新的活動標籤，並且在新的活動標籤中有一個加載指示器，現在等待3秒更容易接受。

使用React，render（）方法由React框架調用，是否可以執行類似於步驟3的操作？

我知道我可以用分頁表替換巨大的表，因此只有有限數量的行將同時呈現。但我的問題集中在處理需要大量時間渲染的UI組件。

來源

2015-10-13 cnshenj

是的，你可以通過給出你的組件狀態來達到這樣的效果。

將getInitialState(return { loading: true });添加到您的組件
根據狀態更改您的呈現方法，例如，像

if (this.state.loading) { 
    return ( 
    <div className='my-nice-tab-container'> 
     <div className='loading-state'>Loading...</div> 
    </div>) 
} else { 
    return (
    <div className='my-nice-tab-container'> 
     <div className='full tab contents'> 
     {myHugeArray.map(item => (return 
      <Item class='one-of-list-of-2000' /> 
     ))} 
     </div> 
    </div>) 
}

並添加componentDidMount()到您的組件，是這樣的：

componentDidMount() { 
    var self = this; 
    setTimeout(() => { 
    self.setState({loading: false}); }, 50); 
}

然後你的組件應該先加載狀態呈現，並且在50ms的負載整個事情。

來源

2015-10-13 16:24:31 wintvelt

謝謝，我發現一個類似的解決方案，因爲加載過程有點複雜。但是這個概念是一樣的。 – cnshenj

反應延遲渲染

回答

相關問題