更新 MapComponent 状态时的性能问题

IT技术 reactjs performance leaflet react-leaflet leaflet.markercluster
2022-07-30 00:52:03

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

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

我创建了一个包含 5000 个标记的代码和牛，您可以看到 2 个存在性能问题的用例：

1.)MapComponent位于react-reflex元素内，允许调整面板大小并将新尺寸（宽度、高度）传播到MapComponent. 如果宽度和高度发生变化，mapRef.invalidateSize()则调用以更新地图尺寸。调整大小非常慢。

2.) 如果用户点击Marker，则更新选中的全局状态。它是一个被点击的标记 id 的列表。地图调用fitBounds方法以关注单击的标记，并且标记图标也已更改。大约有 1 秒的延迟。

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

我查看了 Chrome 性能配置文件，似乎大部分时间都花在了内部 React 方法上。

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

1个回答

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

由此

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

像这样

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

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

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

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

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

其它你可能感兴趣的问题
上一篇React Axios，无法读取 axios 响应中的 Set-Cookie 标头 下一篇plotly onClick 事件导致 React 中的无限渲染循环