时间戳

首页 > 解决方案 > React 卸载 30k+ 组件很慢

javascript - React 卸载 30k+ 组件很慢

问题描述

我有一个包含大约 30k+ 交互式标记和一些过滤器的地图。每当我选择一个过滤器并单击应用时，都会进行 API 调用以获取过滤后的数据。现在的问题是现有的 30k+ 标记将被删除（卸载），并将替换为来自 api 调用的新过滤数据。此卸载操作会导致 UI 冻结大约 10 秒以上，最后呈现过滤后的数据。进行此类操作时，我什至无法显示微调器。

如何优化这么大数据集的挂载和卸载？我已经使用了 React.memo() 之类的所有渲染优化，但问题是由于初始渲染和一次删除如此大的数据。

`<Map
     ref={mapRef}
     center={latlng}
     zoom={14}
     minZoom={12}
     preferCanvas={true}
  >
  <TileLayer
      attribution='&amp;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>`

我考虑过的事情：

  1. 使用display: none而不是卸载。但这并不能解决初始安装的问题，也不能解决标记组件的问题。
  2. 将渲染卸载到 Worker 线程。（不知道这在 React 中是否可行——最好的方法）
  3. 使用普通的旧 DOM 元素而不是 React 组件，但这感觉不是最佳的

非常感谢有关如何处理如此大的数据集的任何指导。

标签： javascriptreactjsleafletreact-leaflet

解决方案

我能够使用 Leaflet.js 的 clearLayers 方法来清除所有标记节点。这修复了挂载和卸载缓慢。

推荐阅读