我有一个 map ,其中包含大约 30k+ 交互式标记和一些过滤器。每当我选择一个过滤器并单击应用时,都会进行 API 调用以获取过滤后的数据。现在的问题是现有的 30k+ 标记将被删除(卸载),并将替换为来自 api 调用的新过滤数据。此卸载操作导致 UI 卡住大约 10 秒以上,并最终呈现过滤后的数据。发生此类操作时,我什至无法显示微调器。
如何优化如此大的数据集的挂载和卸载?。我已经使用了所有渲染优化,如 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 组件,但这并不是最佳选择
非常感谢任何关于如何处理如此庞大的数据集的指导。
最佳答案
我能够使用 Leaflet.js 的 clearLayers 方法清除所有标记节点。这解决了挂载和卸载缓慢的问题。
关于javascript - React 卸载 30k+ 组件很慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63272985/