React Native: 如何在每次状态更新时停止地图标记的重新渲染

Question

我有一个组件，其中包含多个自定义标记的地图和用于这些位置的卡片旋转木马。当用户按下标记时，它应该显示弹出框并在标记旁边显示位置名称（但在弹出框之外）。

然而，由于我在onRegionChangeComplete中更新状态，如果用户移动地图并快速按下标记（在从调用onRegionChangeComplete中的setState更新状态完成之前），则标记将重新渲染，但事件永远不会触发。

一种解决方案可能是使用shouldComponentUpdate，但文档指出它仅用于性能优化，而不是防止重新渲染（https://reactjs.org/docs/react-component.html#shouldcomponentupdate）。更重要的是，我的componentDidUpdate函数具有依赖于在shouldComponentUpdate中设置的区域的条件逻辑，以及其他条件操作，因此我不想防止整个组件的重新渲染，只是不必要的标记重新渲染。

我还使用了性能优化，它在https://github.com/react-native-community/react-native-maps/issues/2082中提到，即将标记包装在实现shouldComponentUpdate和getDerivedStateFromProps的组件中。然而，我不确定这是否有所作为，因为父组件似乎只是重新创建了所有已优化的标记，而没有使用它们的优化来处理重新渲染。此外，即使我不使用包装标记，而是使用传统的自定义标记，我仍然遇到同样的问题。

我还在react-native-maps上开了一个问题，但还没有得到回复：https://github.com/react-native-community/react-native-maps/issues/2860 我的'onRegionComplete'函数在地图移动时更新状态。出于简洁起见，我删除了一些其他条件状态更新。

onRegionChangeComplete = (region) => {
    const nextState = { };
    nextState.region = region;

    if (this.state.showNoResultsCard) {
      nextState.showNoResultsCard = false;
    }

    .
    .
    .

    this.setState({ ...nextState });

    this.props.setSearchRect({
      latitude1: region.latitude + (region.latitudeDelta / 2),
      longitude1: region.longitude + (region.longitudeDelta / 2),
      latitude2: region.latitude - (region.latitudeDelta / 2),
      longitude2: region.longitude - (region.longitudeDelta / 2)
    });
  }

使用较传统的标记（而不是优化版本）的地图视图：

<MapView // show if loaded or show a message asking for location
    provider={PROVIDER_GOOGLE}
    style={{ flex: 1, minHeight: 200, minWidth: 200 }}
    initialRegion={constants.initialRegion}
    ref={this.mapRef}
    onRegionChange={this.onRegionChange}
    onRegionChangeComplete={this.onRegionChangeComplete}
    showsUserLocationButton={false}
    showsPointsOfInterest={false}
    showsCompass={false}
    moveOnMarkerPress={false}
    onMapReady={this.onMapReady}
    customMapStyle={mapStyle}
    zoomTapEnabled={false}
    >

        {this.state.isMapReady && this.props.places.map((place, index) => {
            const calloutText = this.getDealText(place, 'callout');
            return (
                <Marker
                    tracksViewChanges
                    key={Shortid.generate()}
                    ref={(ref) => { this.markers[index] = ref; }}
                    coordinate={{
                        latitude: place.getLatitude(),
                        longitude: place.getLongitude()
                    }}
                    onPress={() => { this.onMarkerSelect(index); }}
                    anchor={{ x: 0.05, y: 0.9 }}
                    centerOffset={{ x: 400, y: -60 }}
                    calloutOffset={{ x: 8, y: 0 }}
                    calloutAnchor={{ x: 0.075, y: 0 }}
                    image={require('../../Assets/icons8-marker-80.png')}
                    style={index === this.state.scrollIndex ? { zIndex: 2 } : null}
                >
               {this.state.scrollIndex === index &&
                    <Text style={styles.markerTitle}>{place.getName()}</Text>}

                  <Callout onPress={() => this.onCalloutTap(place)} tooltip={false}>
                    <View style={{
                      borderColor: red,
                      width: 240,
                      borderWidth: 0,
                      borderRadius: 20,
                      paddingHorizontal: 8,
                      flexDirection: 'column',
                      justifyContent: 'flex-start',
                      alignItems: 'center'
                    }}
                    >
                      <Text style={styles.Title}>Now:</Text>
                      <View style={{
                        width: 240,
                        flexDirection: 'column',
                        justifyContent: 'space-evenly',
                        alignItems: 'flex-start',
                        paddingHorizontal: 8,
                        flex: 1
                      }}
                      >
                        {calloutText.Text}
                    </View>
                </View>
            </Callout>
        </Marker>
        );
    }) 
}

</MapView>

我的标记按下事件的函数：

onMarkerSelect(index) {
    this.setState({ scrollIndex: index });
    this.carousel._component.scrollToIndex({
      index,
      animated: true,
      viewOffset: 0,
      viewPosition: 0.5
    });

    this.markers[index].redrawCallout();
}

更新状态后快速按下标记会导致onPress事件无法触发。另外，每次父组件更新时，标记都会重新渲染/创建。(我之所以说重新创建是因为似乎标记在不触发shouldComponentUpdate或componentDidUpdate的情况下重新渲染)。

有没有办法在onRegionChangeComplete中更新状态而不强制重新渲染标记？

- Marcellus

---

你成功让它工作了吗？请告诉我们解决这个问题的方法。我也遇到了类似的问题。 - Balasubramanian

问题是我在随机生成标记的键，因此每次重新渲染时父组件都会重新创建它们。我在创建的 Github 问题中描述了这个问题，并在问题(#2860)中提供了链接，希望你已经看到并解决了你的问题。 - Marcellus

Answer 1

对于其他遇到此问题的人，问题出在我随机生成标记（markers）的键（keys），导致每次重新渲染时父组件都会创建新的标记。

具体来说，key={Shortid.generate()} 这一行是有问题的。

- Marcellus