reactjs - 如果更新 MapComponent 状态，则会出现性能问题

Question

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

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

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

1.) MapComponent在里面react-reflex元素，允许调整面板大小并将新尺寸(宽度、高度)传播到 MapComponent 。如果宽度和高度改变，mapRef.invalidateSize()被调用来更新 map 尺寸。调整大小非常慢。

2.) 如果用户点击Marker ，全局状态选择被更新。它是单击的标记 ID 的列表。 map 来电fitBounds聚焦于单击的标记的方法以及标记图标已更改。大约有 1 秒的延迟。

在我的项目中，如果我需要更改MapComponent状态，在开发模式下需要 2-3 秒才能反射(reflect)更改，并且它只是 MapComponent 的一次重新渲染。及其元素(标记)。

我查看了 Chrome 性能 profile看起来大部分时间都花在了内部 React 方法上。

可以通过使用 memo 防止重新渲染来解决此问题，类似于shouldComponentUpdate ，但这使整个代码库变得过于复杂。 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>
    </>
  );

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

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

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