我有一個地圖,其中包含大約 30k+ 個交互式標記和一些過濾器。每當我選擇一個過濾器并單擊應用時,都會進行 API 調用以獲取過濾后的數據?,F在的問題是現有的 30k+ 標記將被刪除(卸載),并將替換為來自 api 調用的新過濾數據。此卸載操作導致 UI 凍結大約 10 秒以上,并最終呈現過濾后的數據。當發(fā)生這樣的操作時,我什至無法顯示微調器。如何優(yōu)化如此大的數據集的掛載和卸載?。我已經使用了所有渲染優(yōu)化,如 React.memo() 等,但問題是由于初始渲染和一次刪除如此大的數據。`<Map ref={mapRef} center={latlng} zoom={14} minZoom={12} preferCanvas={true} > <TileLayer attribution='&copy <a href="http://osm.org/copyright" target="_blank" rel="noopener noreferrer">OSM</a>' url={`${OSM_URL}/tile/{z}/{x}/{y}.png`} /> <MarkerClusterGroup chunkedLoading={true} chunkInterval={500}> <MarkerList markers={mydata} showInfoPopup={showInfoPopup} /> </MarkerClusterGroup></Map>`我考慮過的事情:使用display: none而不是卸載。但這不會解決初始安裝的問題,并且它不可能用于標記組件。將渲染卸載到工作線程。(不知道這在 React 中是否可行——最好的方法)使用普通的舊 DOM 元素而不是 React 組件,但這并不是最佳選擇非常感謝有關如何處理如此大的數據集的任何指導。
React 卸載 30k+ 組件很慢
月關寶盒
2022-12-22 15:38:04