更新MapComponent状态时的性能问题

Question

我不确定这是react- leaflet -markercluster、react-leaflet、leaflet、react还是我的代码的问题。

我有一个包含数千个标记的地图，我正在使用react-leaflet-markercluster进行标记聚类。如果我需要更新MapComponent的全局状态，在反映此更改时会有1-3秒的延迟。

我创建了一个具有5000个标记的codesandox，您可以看到有两个用例存在性能问题：

1.) MapComponent位于react-reflex元素内部，允许调整面板大小并将新的维度(宽度、高度)传播到MapComponent。如果更改了宽度和高度，则会调用mapRef.invalidateSize()来更新地图尺寸。调整大小的速度非常慢。

2.)如果用户单击Marker，则会更新选定的全局状态。它是单击的标记ids的列表。Map调用fitBounds方法将焦点放在单击的标记上，并且标记图标也会更改。大约有1秒的延迟。

在我的项目中，如果我需要更改MapComponent状态，在开发模式下需要2-3秒才能反映出更改，而且它只是MapComponent及其元素(标记)的单个重现。

我看了一下Chrome performance profile，似乎大部分时间都花在了内部React方法上。

可以通过使用类似于shouldComponentUpdate的memo防止重新呈现来修复此问题，但它会使整个代码库过于复杂。preferCanvas选项不会改变任何东西。我想知道解决这些问题的好方法是什么。

Answer 1

我在您的代码中发现的主要问题是您重新呈现了整个标记组件集。如果您记住了这些组件的生成，就会获得很好的性能提升；您可以将所有组件存储在一个const中，而不是在JSX中运行.map；这样，.map就不会在每次呈现时都运行。

从这里开始

...
   <MarkerClusterGroup>
     {markers.map((marker, i) => {
...

像这样的东西

  const markerComponents = React.useMemo(() => {
    return markers.map((marker) => {
      return (
        <MarkerContainer .../>
      );
    });
  }, [markers, onMarkerClick]);

  return (
    <>
      <MarkerClusterGroup>{markerComponents}</MarkerClusterGroup>
    </>
  );

我尝试的第二个重构是改变选择标记的方式。我不是从每个标记的选定数组中确定选定的道具，而是在每个标记对象上放置一个选定的字段，并在选择一个标记时更新它。此外，我将位置添加到onClickHandler参数中，以避免在标记数组中查找该位置。

还有一些其他的调整我没有在这里解释，所以请检查我的codesandbox版本。

https://codesandbox.io/s/dreamy-andras-tfl67?file=/src/App.js