如何解决防止仅对组件的一部分进行状态更新时重新渲染
我在我的 React-Native 应用程序中使用动态移动标记,为了使标记移动,我在一个时间间隔内进行状态更新,用新的标记位置重新渲染屏幕。我也在尝试使用 react-native-maps-directions,它使用 google Routes API(这需要花钱),我不能让路由 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>
解决方法
我通过创建一个新的基于外部类的组件并使用另一个 shouldComponentUpdate 来测试它以查看目标道具是否更新来解决它。如果它更新了,则重新渲染组件,否则它会发回已经渲染的内容。非常感谢 Drew Reese 的提示!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。