Question

我有一个1000分钟到5000个最大点的数组来绘制我的反应传单地图。所以我在map组件中的render函数看起来类似于：

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

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

我的问题是，通常需要1秒到3秒才能在地图上渲染html并且用户体验非常糟糕，因为窗口会在地图移动时阻挡一点点。

在地图函数运行时，是否有分割所有标记渲染或让窗口加载javascript异步或显示加载图标？

即使有一个更好的方法，我正在做的那个，很高兴知道。

提前致谢

编辑：不需要对集群做任何事情，因为它已经集中了标记，与以某种方式向用户显示javascript正在运行所以他需要等待，或者渲染异步以使地图流动。 / p>

Answer 1

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

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

这几乎是通用的，但特别适用于您的情况：您的代码在每次Marker调用时重新计算render()组件数组（这将成为一项昂贵的操作），而不是在标记时数据变化。因此缓存其结果，例如：

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> );
    }
}

在反应传单中渲染超过1000个标记需要很长时间并且用户体验非常糟糕，需要改进我的方法

1 个答案: