React 卸载 30k+ 组件很慢答案

【问题标题】：React unmounting 30k+ components is slowReact 卸载 30k+ 组件很慢
【发布时间】：2020-08-05 20:23:11
【问题描述】：

我有一个包含大约 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>`

我考虑过的事情：

使用display: none 而不是卸载。但这并不能解决初始挂载的问题，也不能解决标记组件的问题。
将渲染卸载到工作线程。（不知道这在 React 中是否可行 - 最好的方式）
使用普通的旧 DOM 元素而不是 React 组件，但这并不理想

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

【问题讨论】：

您能否仅卸载已更改的内容而不是所有数据？另外我认为您可以在操作开始之前显示微调器，然后在操作完成后移除微调器。
嗯，改变的是整个数据集。此外，微调器只能在没有异步操作的情况下显示。问题在于安装和卸载大量组件，不幸的是这不得不发生。我正在寻找解锁 UI 线程的方法。
也许您可以将MarkerList 包装在一个条件中，如果 mydata 变得虚假，它将卸载所有这些？可能是{ mydata && <MarkerList markers={mydata} showInfoPopup={showInfoPopup} /> } 之类的，或者检查 mydata 的长度。
最后你还是卸载一切吧？这仍然会阻塞 UI 线程
我相信这是真的；虚拟 DOM 的工作必须完成。我刚刚找到了对“分块”的参考，这可能会有所帮助。 leaflet.github.io/Leaflet.markercluster/…

标签： javascript reactjs leaflet react-leaflet

【解决方案1】：

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

【讨论】：