我不确定这是否是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
选项不会改变任何东西。我想知道解决这些问题的好方法是什么。
最佳答案
我在代码中发现的主要问题是重新渲染整套标记组件。如果你记住它们的生成,你就会获得良好的性能提升;您可以将所有组件存储在 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
关于reactjs - 如果更新 MapComponent 状态,则会出现性能问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66447419/