反应本地Google地图标记性能低下。可能重新渲染？

Question

我正在构建一个使用以下组件提供地图的应用。 我正在使用此仓库中的群集机制：React Native SuperCluster 。

class MapComponent extends Component {

constructor(props) {
    super(props);

    this.state = {
        pins: [],
        markers: [],


        region: {
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
            radius: 15000
        },

        location: {
            coords: {
                latitude: 0,
                longitude: 0
            }
        },

        markerPosition: {
            latitude: 0,
            longitude: 0
        },
    };

    this.renderMarker = this.renderMarker.bind(this);
    this.renderCluster = this.renderCluster.bind(this);

    this.shouldUpdate = true;
}



componentDidMount() {
    //this.reload()
    if (Platform.OS === 'android' && !Constants.isDevice) {
        this.setState({
            ...this.state,
            errorMessage: 'Oops, this will not work on Sketch in an Android emulator. Try it on your device!'
        });
    } else {
        this._getLocationAsync();
    }
    this.fetchMarkerData()



}

_getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
        this.setState({
            ...this.state,
            errorMessage: 'Permission to access location was denied'
        });
    }

    let location = await Location.getCurrentPositionAsync({
        enableHighAccuracy: true, maximumAge: 1000, timeout: 20000
    });
    this.setState({ ...this.state, location });
};

fetchMarkerData() {
    const shops = this.props.shops;
    shops.map((shop, index) =>{
        const coords = {
            latitude: shop.latitude,
            longitude: shop.longitude
        };
        shop.id = index;
        shop.location = coords;


        return shop
    });

    this.setState({
        isLoading: false,
        pins: shops
    }, () => {
        this.shouldUpdate = false;
    });
}

shouldComponentUpdate(nexProps, nextState){
    return this.shouldUpdate;
}

renderCluster = (cluster, onPress) => {
    const pointCount = cluster.pointCount,
        coordinate = cluster.coordinate,
        clusterId = cluster.clusterId;

    return (
        <Marker identifier={`cluster-${clusterId}`} coordinate={coordinate} onPress={onPress}>
            <View style={styles.clusterContainer}>
                <Text style={styles.clusterText}>
                    {pointCount}
                </Text>
            </View>
        </Marker>
    )
};


renderMarker = (pin) => {
    const coords = {
        latitude: pin.latitude,
        longitude: pin.longitude
    };
    return (
        <Marker
            identifier={`pin-${pin.id}`}
            key={pin.id}
            coordinate={coords} />
    )
};


render() {
    return (
        <View style={styles.container}>

            {/* Cluster Map Example */}
            <ClusteredMapView

                style={styles.map}
                provider="google"
                data={this.state.pins}
                renderMarker={this.renderMarker}
                renderCluster={this.renderCluster}
                initialRegion={{latitude: this.state.region.latitude,
                    longitude: this.state.region.longitude,
                    latitudeDelta: this.state.region.latitudeDelta,
                    longitudeDelta: this.state.region.longitudeDelta }}>
                {/*
                    Markers rendered as children of ClusteredMapView are not taken in account by the clustering feature,
                    they will just act as they were rendered within a normal react-native-maps instance
                  */}

                <Marker
                    //TODO: Make the gps position marker show up on top of the others.
                    coordinate={{
                        latitude : this.state.location.coords.latitude,
                        longitude : this.state.location.coords.longitude}}>
                    <View style={styles.bubble}>
                        <View style = {styles.gps_marker}/>

                    </View>
                </Marker>



            </ClusteredMapView>
            {/* Overlay for drawer swipe functionality */}
            <View style={styles.mapDrawerOverlay} />


        </View>
    )
}
}

问题在于上述组件的响应速度逐渐降低，这提示可能重新绘制标记和簇。 有什么办法可以避免这种情况？