Reactjs MapComponent状态更新时的性能问题

我不确定这是否是react传单markercluster、react传单、传单、react或我的代码的问题

我有一张有几千个标记的地图，我正在使用react传单标记聚类进行标记聚类。如果需要更新

MapComponent

的全局状态，则反映此更改时会有1-3秒的延迟

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

1.

MapComponent

位于元素内部，允许调整面板大小并将新尺寸（宽度、高度）传播到

MapComponent

。如果更改了宽度和高度，将调用

mapRef.invalidateSize（）

来更新地图尺寸。调整大小非常慢

2.）如果用户单击

标记

，则会更新所选的全局状态。它是已单击标记ID的列表。Map调用

fitBounds

方法来关注单击的标记，并且标记图标也会更改。大约有1秒的延迟

在我的项目中，如果我需要更改

MapComponent

状态，则在dev模式下反映更改时需要2-3秒，这只是

MapComponent

及其元素（标记）的一次重新呈现

我看了一下Chrome的性能，似乎大部分时间都花在了内部React方法上

---

可以通过使用

memo

（类似于

shouldComponentUpdate

）防止重新招标来解决此问题，但这会使整个代码库过于复杂<代码>首选画布选项不会更改任何内容。我想知道什么是解决这些问题的好方法。

我在您的代码中发现的主要问题是您重新呈现了整个标记组件集。如果你记住了这一代人，你就能获得良好的绩效提升；不必在JSX中运行

.map

，您可以将所有组件存储在一个常量中；这样，

.map

就不会在每个渲染上运行

由此

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

。。。
{markers.map（（marker，i）=>{
...

像这样的事情

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

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

const-markerComponents=React.usemo（（）=>{
返回markers.map（（marker）=>{
返回(
);
});
}，[markers，onMarkerClick]）；
返回(
{markerComponents}
);

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

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