在react-leaflet中渲染1000多个标记需要很长时间，用户体验也很糟糕，需要改进我的方法

Question

我在我的react-leaflet地图上有一个1000分钟到5000个最大点的数组。因此，我在map组件中的渲染函数看起来类似于：

renderMarkers = () => {
    return markers.map(
        (marker) => {
            return <Marker key={`${marker.id}`} position={[marker.lt, marker.lg]} ></Marker>
        }
    )
}

render() {
    <Map>
        {this.renderMarkers()}
    </Map>
}

我的问题是，在地图上渲染html通常需要1秒到3秒的时间，用户体验很糟糕，因为当地图移动时，窗口会不时出现阻塞。

有没有办法将渲染的所有标记分成几个部分，或者让窗口异步加载该javascript，或者在map函数运行时显示一个加载图标？

即使有一个更好的方法，我正在做的，将是伟大的知道。

提前感谢

编辑:不必对聚类做任何事情，因为它已经对标记进行了聚类，而是以某种方式向用户显示javascript正在运行，因此他需要等待，或者进行异步渲染以使地图流动。

Answer 1

啊，假设反应式范例更好，但忘记了函数调用在每次render()调用时都会发生，这是错误的。

根据经验，如果相同的操作每次都返回相同的值，并且您的代码多次运行该操作，那么您应该缓存结果(或者至少考虑缓存结果)。

这几乎是通用的，但只适用于您的情况:您的代码在每次render()调用时重新计算一组Marker组件(这将成为一个开销很大的操作)，而不是在标记数据发生更改时。所以缓存它的结果，如下所示：

class Foo extends React.Component {

    getDerivedStateFromProps(nextProps, prevState) {
        if ( /* marker data has changed or */ !this._markerComponents) {
            this._markerComponents = markers.map( (marker, key) => 
                ( <Marker key={`marker-${key}`} position={[marker.lt, marker.lg]} ></Marker> )
            );
        }
    }

    render() {
        return ( <Map>{this._markerComponents}</Map> );
    }
}