利用React實現(xiàn)虛擬列表的示例代碼
大家好,我是前端西瓜哥。這次我們來看看虛擬列表是什么玩意,并用 React 來實現(xiàn)兩種虛擬列表組件。
虛擬列表,其實就是將一個原本需要全部列表項的渲染的長列表,改為只渲染可視區(qū)域內(nèi)的列表項,但滾動效果還是要和渲染所有列表項的長列表一樣。
虛擬列表解決的長列表渲染大量節(jié)點導致的性能問題:
- 一次性渲染大量節(jié)點,會占用大量 GP 資源,導致卡頓;
- 即使渲染好了,大量的節(jié)點也持續(xù)占用內(nèi)存。列表項下的節(jié)點越多,就越耗費性能。
虛擬列表的實現(xiàn)分兩種,一種是列表項高度固定的情況,另一種是列表項高度動態(tài)的情況。
列表項高度固定
列表項高度固定的情況會簡單很多,因為我們可以在渲染前就能知道任何一個列表項的位置。
因為涉及到的變量很多,實現(xiàn)起來還是有點繁瑣。
我們需要的必要信息有:
- 容器高度(即可視區(qū)域高度) containerHeight
- 列表長度(即列表項總數(shù)) itemCount
- 列表項尺寸 itemHeight
- 滾動位置 scrollTop
虛擬列表通常來說是垂直方向的,但偶爾也有水平方向的場景,所以如果你要實現(xiàn)一個廣泛適用的組件,理論上應該用 size 而不是 height,前者語義更好。
但為了減少用戶的思維轉(zhuǎn)換導致的負擔,本文會使用 height 來表示一個列表項的高度。
要讓表單項渲染在正確位置,我們有幾種方案:
- 在容器的第一個元素用一個空元素,設置一個高度,將需要顯示在可視區(qū)域的 items 往下推到正確位置。我嘗試著實現(xiàn)了,發(fā)現(xiàn)滾動快一點就會有閃屏現(xiàn)象。
- 將需要渲染的元素一個 div 包裹起來,對這個 div 應用
transform: translate3d(0px, 1000px, 0px);
- 對每個列表項使用絕對定位(或 transform)
這里我們選擇第一個方案來進行實現(xiàn)。
代碼實現(xiàn)
這里我先給出代碼實現(xiàn)。
我們實現(xiàn)了一個 FixedSizeList 的 React 組件。
它接收一個上面提到的幾個數(shù)量和高度參數(shù)外,還接收一個列表項組件。
我們會將計算出來的高度做成 style 對象以及一個索引值 index傳入到這個組件里進行實例化。所以記得在列表項組件內(nèi)接收它們并使用上它們,尤其是 style。
/** ?*?一個將?items?往下推到正確位置的空元素 ?*/ import?{?useState?}?from?'react'; import?{?flushSync?}?from?'react-dom'; function?FixedSizeList({?containerHeight,?itemHeight,?itemCount,?children?})?{ ??//?children?語義不好,賦值給?Component ??const?Component?=?children; ??const?contentHeight?=?itemHeight?*?itemCount;?//?內(nèi)容總高度 ??const?[scrollTop,?setScrollTop]?=?useState(0);?//?滾動位置 ??//?繼續(xù)需要渲染的?item?索引有哪些 ??let?startIdx?=?Math.floor(scrollTop?/?itemHeight); ??let?endIdx?=?Math.floor((scrollTop?+?containerHeight)?/?itemHeight); ??//?上下額外多渲染幾個?item,解決滾動時來不及加載元素出現(xiàn)短暫的空白區(qū)域的問題 ??const?paddingCount?=?2; ??startIdx?=?Math.max(startIdx?-?paddingCount,?0);?//?處理越界情況 ??endIdx?=?Math.min(endIdx?+?paddingCount,?itemCount?-?1); ??const?top?=?itemHeight?*?startIdx;?//?第一個渲染的?item?到頂部距離 ??//?需要渲染的?items ??const?items?=?[]; ??for?(let?i?=?startIdx;?i?<=?endIdx;?i++)?{ ????items.push(<Component?key={i}?index={i}?style={{?height:?itemHeight?}}?/>); ??} ??return?( ????<div ??????style={{?height:?containerHeight,?overflow:?'auto'?}} ??????onScroll={(e)?=>?{ ????????//?處理渲染異步導致的空白現(xiàn)象 ????????//?改為同步更新,但可能會有性能問題,可以做?節(jié)流?+?RAF?優(yōu)化 ????????flushSync(()?=>?{ ??????????setScrollTop(e.target.scrollTop); ????????}); ??????}} ????> ??????<div?style={{?height:?contentHeight?}}> ????????{/*?一個將?items?往下推到正確位置的空元素?*/} ????????<div?style={{?height:?top?}}></div> ????????{items} ??????</div> ????</div> ??); }
線上 demo:
https://codesandbox.io/s/jhe2rt
效果:
首先我們需要知道 渲染的節(jié)點的索引值范圍。
//?計算需要渲染的?item?范圍 let?startIdx?=?Math.floor(scrollTop?/?itemHeight); let?endIdx?=?Math.floor((scrollTop?+?containerHeight)?/?itemHeight);
首先算第一個 item 的位置 startIdx。
我們用 scrollTop 除以列表項高度 itemHeight,我們就知道 scrollTop 經(jīng)過了多個 item,將得到的結(jié)果向下取整就是可視區(qū)域中的第一個 item。最后一個索引值 endidx 計算同理。
有時候我們希望上下方向再多渲染幾個 item(緩解在做節(jié)流時沒有立即渲染導致的空白現(xiàn)象),我們可以讓范圍往兩邊擴展一些,注意不要越界。
//?擴展范圍 const?paddingCount?=?2; startIdx?=?Math.max(startIdx?-?paddingCount,?0);?//?處理越界情況 endIdx?=?Math.min(endIdx?+?paddingCount,?itemCount?-?1);
然后基于這個范圍,對列表項組件進行實例化。
//?需要渲染的?items const?items?=?[]; for?(let?i?=?startIdx;?i?<=?endIdx;?i++)?{ ??items.push(<Component?key={i}?index={i}?style={{?height:?itemHeight?}}?/>); }
然后是 DOM 結(jié)構(gòu)的說明。
<div ??style={{?height:?containerHeight,?overflow:?'auto'?}} ??onScroll={(e)?=>?{ ????//?處理渲染異步導致的空白現(xiàn)象 ????//?改為同步更新,但可能會有性能問題,可以做?節(jié)流?+?RAF?優(yōu)化 ????flushSync(()?=>?{ ??????setScrollTop(e.target.scrollTop); ????}); ??}} > ??<div?style={{?height:?contentHeight?}}> ????{/*?一個將?items?往下推到正確位置的空元素?*/} ????<div?style={{?height:?top?}}></div> ????{items} ??</div> </div>
最外層是“容器 div”,我們給它的高度設置傳入的 containerHeight。
接著是“內(nèi)容 div”。contentHeight 由 itemHeight 乘以 itemCount 計算而來,代表的是所有 item 組成的高度。我們把它放著這里,是為了讓 “容器 div” 產(chǎn)生正確的滾動條。
內(nèi)容 div 下是我們的 items,以及開頭的 一個將 items 往下推到正確位置的空元素,可以看作是一種 padding-top。它的高度值 top 由 itemHeight 乘以 startIdx 計算而來。
然后是監(jiān)聽滾動事件,當 scrollTop 改變時,更新組件。我這里使用的是 React18,默認是并發(fā)模式,更新狀態(tài) setState 是異步的,因此在快速滾動的情況下,會出現(xiàn)渲染不實時導致的短暫空白現(xiàn)象。
所以這里我用了 ReactDOM 的 flushSync 方法,讓狀態(tài)的更新變成同步的,來解決短暫空白問題。
但滾動是一個高頻觸發(fā)的時間,我的這種寫法在列表項復雜的情況下,是可能會出現(xiàn)性能問題的。更好的做法是做 函數(shù)節(jié)流 + RAF(requestAnimationFrame),雖然也會有一些空白現(xiàn)象,但不會太嚴重。
列表項高度動態(tài)
列表項高度動態(tài)的情況,就復雜得多。
如果能夠 在渲染前知道所有列表項的高度,那實現(xiàn)思路還是同前面列表項高度固定的情況一致。
只是我們不能用乘法來計算了,要改成累加的方式來計算 startIdx 和 endIdx。
然而實際上更常見的情況是列表項 高度根據(jù)內(nèi)容自適應,只能在渲染完成后才能知道真正高度。
怎么辦呢?通常的方式是 提供一個列表項預設高度,在列表項渲染完成后,再更新高度。
代碼實現(xiàn)
我們先給出實現(xiàn):
import?{?forwardRef,?useState?}?from?'react'; import?{?flushSync?}?from?'react-dom'; //?動態(tài)列表組件 const?VariableSizeList?=?forwardRef( ??({?containerHeight,?getItemHeight,?itemCount,?itemData,?children?},?ref)?=>?{ ????ref.current?=?{ ??????resetHeight:?()?=>?{ ????????setOffsets(genOffsets()); ??????} ????}; ????//?children?語義不好,賦值給?Component ????const?Component?=?children; ????const?[scrollTop,?setScrollTop]?=?useState(0);?//?滾動位置 ????//?根據(jù)?getItemHeight?生成?offsets ????//?本質(zhì)是前綴和 ????const?genOffsets?=?()?=>?{ ??????const?a?=?[]; ??????a[0]?=?getItemHeight(0); ??????for?(let?i?=?1;?i?<?itemCount;?i++)?{ ????????a[i]?=?getItemHeight(i)?+?a[i?-?1]; ??????} ??????return?a; ????}; ????//?所有?items?的位置 ????const?[offsets,?setOffsets]?=?useState(()?=>?{ ??????return?genOffsets(); ????}); ????//?找?startIdx?和?endIdx ????//?這里用了普通的查找,更好的方式是二分查找 ????let?startIdx?=?offsets.findIndex((pos)?=>?pos?>?scrollTop); ????let?endIdx?=?offsets.findIndex((pos)?=>?pos?>?scrollTop?+?containerHeight); ????if?(endIdx?===?-1)?endIdx?=?itemCount; ????const?paddingCount?=?2; ????startIdx?=?Math.max(startIdx?-?paddingCount,?0);?//?處理越界情況 ????endIdx?=?Math.min(endIdx?+?paddingCount,?itemCount?-?1); ????//?計算內(nèi)容總高度 ????const?contentHeight?=?offsets[offsets.length?-?1]; ????//?需要渲染的?items ????const?items?=?[]; ????for?(let?i?=?startIdx;?i?<=?endIdx;?i++)?{ ??????const?top?=?i?===?0???0?:?offsets[i?-?1]; ??????const?height?=?i?===?0???offsets[0]?:?offsets[i]?-?offsets[i?-?1]; ??????items.push( ????????<Component ??????????key={i} ??????????index={i} ??????????style={{ ????????????position:?'absolute', ????????????left:?0, ????????????top, ????????????width:?'100%', ????????????height ??????????}} ??????????data={itemData} ????????/> ??????); ????} ????return?( ??????<div ????????style={{ ??????????height:?containerHeight, ??????????overflow:?'auto', ??????????position:?'relative' ????????}} ????????onScroll={(e)?=>?{ ??????????flushSync(()?=>?{ ????????????setScrollTop(e.target.scrollTop); ??????????}); ????????}} ??????> ????????<div?style={{?height:?contentHeight?}}>{items}</div> ??????</div> ????); ??} );
線上 demo:
https://codesandbox.io/s/4oy84f
效果:
思路說明
和列表項等高的實現(xiàn)不同,這里不能傳一個固定值 itemHeight,改為傳入一個根據(jù) index 獲取列表項寬度函數(shù) getItemHeight(index)
。
組件會通過這個函數(shù),來拿到不同列表項的高度,來計算出 offsets 數(shù)組。offsets 是每個列表項的底邊到頂部的距離。offsets 的作用是在滾動到特定位置時,計算出需要渲染的列表項有哪些。
當然你也可以用高度數(shù)組,但查找起來并沒有優(yōu)勢,你需要累加。offsets 是 heights 的累加緩存結(jié)果(其實也就是前綴和)。
假設幾個列表項的高度數(shù)組 heights 為 [10, 20, 40, 100]
,那么 offsets 就是 [10, 30, 70, 170]
。一推導公式為:offsets[i] = offsets[i-1] + heights[i]
下面是計算 offsets 的代碼:
const?genOffsets?=?()?=>?{ ??const?a?=?[]; ??a[0]?=?getItemHeight(0); ??for?(let?i?=?1;?i?<?itemCount;?i++)?{ ????a[i]?=?getItemHeight(i)?+?a[i?-?1]; ??} ??return?a; }; //?所有?items?的位置 const?[offsets,?setOffsets]?=?useState(()?=>?{ ??return?genOffsets(); });
getItemHeight 在列表項能渲染前,會提供一個預估高度 estimatedItemHeight。
//?高度數(shù)組,當列表項渲染完成時,更新它 const?heightsRef?=?useRef(new?Array(100)); //?預估高度 const?estimatedItemHeight?=?40; const?getHeight?=?(index)?=>?{ ??return?heightsRef.current[index]????estimatedItemHeight; };
這里我用 genOffsets 函數(shù)生成了一個完整的 offsets 數(shù)組。
其實,我們也可以考慮做 惰性計算:一開始不計算出整個 offsets ,而是只計算前幾個 item 的 offset,并通過這幾個高度來推測一個總內(nèi)容高度。然后在后面滾動時再一點點補充 offset,再一點點修正總內(nèi)容高度。
為了讓調(diào)用者可以手動觸發(fā)高度的重新計算。虛擬列表組件通過 ref 提供了一個 resetHeight 方法來重置緩存的高度。
ref.current?=?{ ??resetHeight:?()?=>?{ ????setOffsets(genOffsets()); ??} }; //?使用方式 <VariableSizeList?ref={listRef}?/> listRef.current.resetHeight();
計算出 offsets 數(shù)組后,我們就可以計算需要渲染的列表項的起始(startIdx)和結(jié)束(endIdx)位置了。
因為 offsets 是有序數(shù)組,我們需要用 高效的二分查找 去查找,時間復雜度為 O(log n)
。
(這里我偷懶直接用了從左往右查找,沒有去做二分查找的實現(xiàn))
//?找?startIdx?和?endIdx //?這里偷懶用了普通的查找,最好的方式是二分查找 let?startIdx?=?offsets.findIndex((pos)?=>?pos?>?scrollTop); let?endIdx?=?offsets.findIndex((pos)?=>?pos?>?scrollTop?+?containerHeight); if?(endIdx?===?-1)?endIdx?=?itemCount; //?上下擴展補充幾個?item const?paddingCount?=?2; startIdx?=?Math.max(startIdx?-?paddingCount,?0);?//?處理越界情況 endIdx?=?Math.min(endIdx?+?paddingCount,?itemCount?-?1);
然后內(nèi)容高度就是:
//?計算高度 const?contentHeight?=?offsets[offsets.length?-?1];
需要渲染的 items:
const?items?=?[]; for?(let?i?=?startIdx;?i?<=?endIdx;?i++)?{ ??//?計算到頂部距離 ??const?top?=?i?===?0???0?:?offsets[i?-?1]; ??//?item?的高度 ??const?height?=?i?===?0???offsets[0]?:?(offsets[i]?-?offsets[i?-?1]); ??items.push( ????<Component ??????key={i} ??????index={i} ??????style={{ ????????position:?'absolute', ????????left:?0, ????????top, ????????width:?'100%', ????????height ??????}} ??????data={itemData} ????/> ??); }
后面的 div 結(jié)構(gòu)和前面的列表項高度固定實現(xiàn)的基本一樣,但我這里換成了絕對定位實現(xiàn)。就不過多贅述了。
return?( ??<div ????style={{ ??????height:?containerHeight, ??????overflow:?'auto', ??????position:?'relative' ????}} ????onScroll={(e)?=>?{ ??????flushSync(()?=>?{ ????????setScrollTop(e.target.scrollTop); ??????}); ????}} ??> ????<div?style={{?height:?contentHeight?}}>{items}</div> ??</div> );
一些需要注意的問題
- 容器寬度變化時,會導致大量列表項的高度變化,需要手動觸發(fā)重置虛擬列表緩存的高度集合,建議寬度固定;
- 圖片加載需要時間,尤其是圖片多的情況下,會讓一個列表項的高度不斷變大,需要你手動觸發(fā)重置虛擬列表高度??梢钥紤]給圖片預設一個寬高,在加載前占據(jù)好高度;
- 因為預估高度并不準確,會導致內(nèi)容高度一直變化。這就是拖動滾動條進行滾動時,滑塊和光標位置慢慢對不上的原因。
- 要考慮獲取列表項的高度并更新虛擬列表高度的時機,可能需要配合 Obsever 監(jiān)聽變化;
- 因為不是渲染所有列表項,所以像是
.item:nth-of-type(2n)
的 CSS 樣式會不符合預期。你需要改成用 JS 根據(jù) index 來應用樣式,如backgroundColor: index % 2 === 0 ? 'burlywood' : 'cadetblue'
。
結(jié)尾
虛擬列表的實現(xiàn),核心在于根據(jù)滾動位置計算落在可視區(qū)域的列表項范圍。
對于高度固定的情況,實現(xiàn)會比較簡單,因為我們有絕對正確的數(shù)據(jù)。
對于高度動態(tài)的情況,就復雜得多,要在列表項渲染后才能得到高度,為此需要設置一個預估高度,并在列表項渲染之后更新高度。
本文中虛擬列表組件的 API 參考了 react-window 庫。如果你需要在生產(chǎn)環(huán)境使用虛擬列表,推薦使用 react-window,它的功能會更強大。
以上就是利用React實現(xiàn)虛擬列表的示例代碼的詳細內(nèi)容,更多關于React虛擬列表的資料請關注腳本之家其它相關文章!
相關文章
淺談React Native Flexbox布局(小結(jié))
這篇文章主要介紹了淺談React Native Flexbox布局(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01React實現(xiàn)單向數(shù)據(jù)流的方法
本文主要介紹了React實現(xiàn)單向數(shù)據(jù)流的方法2023-04-04react+ant design實現(xiàn)Table的增、刪、改的示例代碼
這篇文章主要介紹了react+ant design實現(xiàn)Table的增、刪、改的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12react native仿微信PopupWindow效果的實例代碼
本篇文章主要介紹了react native仿微信PopupWindow效果的實例代碼,具有一定的參考價值,有興趣的可以了解一下2017-08-08使用React-Window實現(xiàn)虛擬滾動效果的示例代碼
React-Window?是一個為?React?應用程序中高效渲染大數(shù)據(jù)集而設計的庫,它基于窗口化或虛擬化的原則運行,本文將使用React-Window實現(xiàn)虛擬滾動效果,感興趣的可以了解下2024-01-01