即使数据未更改，小叶簇标记也会重新渲染并关闭打开的蜘蛛

问题描述

我在React应用程序中有一个Leaflet映射，并且我正在使用react-leaflet-markercluster来聚类位于完全相同坐标上的标记。

我也有一个请求，我每5秒发出一次以获得标记，大多数情况下它们是相同的标记，但是在单击群集标记时，仍然需要在5秒钟后重新渲染所有标记，然后使用蜘蛛关闭。

您可以尝试在此演示中看到它（单击并等待，蜘蛛关闭）： https://stackblitz.com/edit/cluster-keeps-rerendering

有人知道如何解决吗？

解决方法

这是预期的行为，因为在您的示例中，创建了markers数组的 deep 副本：

   this.setState(prevState => ({
        markers: prevState.markers.map(marker => ([ ...marker ]))
      }));

来自shouldComponentUpdate documentation：

PureComponent对道具和状态进行浅比较， 并减少了跳过必要更新的机会。

表示每次markers状态更改Map组件时都会重新呈现。

考虑创建markers数组的浅副本，例如：

const newMarkers = [...this.state.markers];
this.setState(prevState => ({
    markers: newMarkers
}));

或通过shouldComponentUpdate lifecycle method执行自定义比较，以下示例演示了如何通过比较MarkerClusterGroup坐标是否发生变化来防止markers重新呈现：

class MarkerList extends React.Component {

  shouldComponentUpdate(nextProps,nextState) { 
      const markers = nextProps.markers.filter((m,i) => this.props.markers[i][0] !== m[0] || this.props.markers[i][1] !== m[1]); 

     return markers.length > 0;
  } 

  render() {
    return (
        <MarkerClusterGroup
          showCoverageOnHover={false}
          maxClusterRadius={0}
        >
          {this.props.markers.map((marker,index) => (
            <Marker position={marker} key={index} />
          ))}
        </MarkerClusterGroup>
    );
  }
}  

Here is一个分叉的例子

注意

通常不建议使用这种方法，因为这可能会导致错误，并且React文档在这方面说明以下内容：

我们不建议进行深度相等性检查或使用 shouldComponentUpdate（）中的JSON.stringify（）。效率很低 会损害性能。