javascript - 防止仅对组件的一部分进行状态更新时重新渲染

Question

我在我的 React-Native 应用程序中使用动态移动标记，为了让标记移动，我在一个时间间隔内进行状态更新，使用新的标记位置重新渲染屏幕。我还尝试使用 react-native-maps-directions，它使用 google Routes API(需要花钱)，我不能让 routes API 每秒被调用两次，因为这看起来很浪费(也因为我差)。

基本上，您是否知道一种方法可以在不重新渲染路线的情况下继续重新渲染更新标记位置的部分

这是我的渲染:

render() {
    return (
      <View>
          <MapView
            allOfMyProps={blahblahProps}
          >

            //This currently does and should re-render every time because I need them to move
            {this.state.markers[1] !== null &&
              this.state.markers.map((marker, index) => (
                <MapView.Marker
                  key={index}
                  coordinate={{
                    latitude: marker.coordinate.latitude,
                    longitude: marker.coordinate.longitude,
                  }}
                />
              ))}

            /// This is what renders the route, I want this to not re-render every time state changes
          <MapViewDirections
              origin={origin}
              destination={destination}
              apikey={GOOGLE_MAPS_API_KEY} //configure this right
              strokeWidth={10}
              strokeColor="green"
           />


          </MapView>
    </View>

Answer 1

我通过创建一个新的基于类的外部组件并使用另一个 shouldComponentUpdate 来测试目标属性是否更新来解决它。如果它更新了，则重新渲染组件，如果没有，它将发回已经渲染的内容。非常感谢 Drew Reese 的提示!