Javascript React卸载30k+部件速度慢

我有一张地图，上面有大约30k+的交互式标记和一些过滤器。每当我选择一个过滤器并单击apply时，就会发出一个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>`

我考虑过的事情：

使用display:none而不是unmount。但这并不能解决初始安装的问题，也不能解决marker组件无法安装的问题。 将渲染卸载到工作线程。不知道这是否是可能的反应-最好的方式 使用普通的旧DOM元素而不是React组件，但这并不是最佳选择

---

对于如何处理如此大的数据集的任何指导，我都非常感激。

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

您能否只卸载已更改的内容而不是所有数据？此外，我认为您可以在操作开始之前显示微调器，然后在操作完成后删除微调器。改变的是整个数据集。此外，微调器只能在异步操作不可用的情况下显示。问题在于必须安装和卸载大量组件，这是很不幸的。我正在寻找解除UI线程阻塞的方法。也许你可以用一个条件来包装MarkerList，如果mydata变得虚假，它将卸载所有标记？类似于{mydata&&}的东西，或者检查mydata的长度。最后你还是在卸载所有东西，对吗？这仍然会阻塞UI线程，我相信这是真的；虚拟DOM的工作必须完成。我刚刚找到了一个关于分块的参考，这可能会有所帮助。