反應虛擬化 - 選擇加入或退出虛擬化

的我用在我的工作日曆一樣的應用最膽大包天的react-virtualized組件。反應虛擬化 - 選擇加入或退出虛擬化

我使用三個網格ScrollSync像this example，但也使用cellRangeRenderer呈現在網格頂部的「藥丸」。

該應用程序的工作原理很漂亮但是我發現，在速度較慢的電腦，雖然滾動渲染可以很慢（可以有大約40列20行和多達40個左右的單一視圖中呈現丸）

一些將要使用這個應用程序其實沒有真正的人的需要，因爲虛擬化的整體數據表是不是是大。所以，我想要做的就是繼續使用react-virtualized提供的總體框架，但與排< X用戶，但只是使整個格柵一氣呵成，希望能夠提高性能。對於行數大於x的用戶，網格將被正常虛擬化。

我知道cellRangeRenderer只是接收行和列的開始和結束索引，然後爲網格的每個單元格返回一個div數組，因此我可以想象只爲整個網格發送開始和結束索引，那麼整個電網將被退回。我只是不知道如何重寫滾動重新呈現。

我很想聽到任何建議或相似的經歷。

來源

2017-10-21 oldo.nicho

我不會使用react-virtualized組件時，您的行數是足夠小，不要求虛擬化的建議。不必要地增加了複雜性等。 :)

您可以創建一個假的Grid組件，只是呈現的所有行，然後有條件它和基於行數真鈔之間進行切換，如：

import {Grid} from 'react-virtualized'; 
import FakeGrid from './FakeGrid'; 

// Your render function 
const GridComponent = this.props.rowCount > SOME_THRESHOLD 
    ? Grid 
    : FakeGrid 

return <GridComponent {...gridProps} />

來源

2017-10-21 16:18:57 brianvaughn

謝謝@brianvaughn，我會嘗試這個。我想用盡可能多的'反應，virtualized'的優勢（在'cellRangeRenderer'，尤其是'scrollSync'功能），所以我給您的建議一去，看看它是如何平移出來。會讓你知道。一如既往，感謝您在這個項目中的積極性:-) –

，因爲我開發的這麼多邏輯和功能都包含在「react-virtualized」組件中，如果有一種方法可以渲染整個電網一次，但攔截任何電話重新渲染。我試過尋找「Grid」的源代碼，但看不到如何實現這一點。你有什麼建議嗎？ –

我想你可以假設這給RV一個特定的寬度+高度+行/列數迫使它最初呈現特定數量的行+列，然後在'componentDidMount'設置一個狀態標誌，告訴渲染「行爲正常現在，你正在瀏覽器中運行「。 – brianvaughn

反應虛擬化 - 選擇加入或退出虛擬化

回答

相關問題