问题描述
我不确定这是 react-leaflet-markercluster、react-leaflet、leaflet、react 还是我的代码的问题。
我有一张包含数千个标记的地图,我正在使用 react-leaflet-markercluster 进行标记聚类。如果我需要更新 MapComponent
的全局状态,则在反映此更改时会有 1-3 秒的延迟。
我创建了一个带有 5000 个标记的 codesandox,您可以看到 2 个存在性能问题的用例:
1.) MapComponent
位于 react-reflex 元素内,允许调整面板大小并将新尺寸(宽度、高度)传播到 MapComponent
。如果宽度和高度发生变化,则调用 mapRef.invalidateSize()
来更新地图尺寸。调整大小非常缓慢。
2.) 如果用户点击 Marker
,选择的全局状态会更新。它是一个点击标记 id 的列表。 Map 调用 fitBounds
方法专注于点击的标记,并且标记图标也发生了变化。大约有 1 秒的延迟。
在我的项目中,如果我需要更改 MapComponent
状态,则在开发模式下需要 2-3 秒才能反映更改,并且它只是 MapComponent
及其元素的一次重新渲染(标记)。
我查看了 Chrome 性能 profile,似乎大部分时间都花在了内部 React 方法上。
可以通过使用类似于 memo
的 shouldComponentUpdate
阻止重新渲染来解决此问题,但它会使整个代码库过于复杂。 preferCanvas
选项不会改变任何东西。我想知道解决这些问题的好方法是什么。
解决方法
我在您的代码中发现的主要问题是您重新渲染了整个标记组件集。如果你记住它们的生成,你会获得很好的性能提升;您可以将所有组件存储在一个常量中,而不是在 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 参数以避免在标记数组中查找该位置。
还有一些其他的调整我没有在这里解释,所以请检查我的代码和盒子版本。
https://codesandbox.io/s/dreamy-andras-tfl67?file=/src/App.js