Javascript 防止仅对组件的一部分进行状态更新时重新渲染
我在我的React原生应用程序中使用动态移动标记,为了使标记移动,我在一段时间间隔内进行了状态更新,用新的标记位置重新呈现屏幕。我还尝试使用react native maps directions,它使用google Routes API(这需要花钱),我不能允许Routes API每秒调用两次,因为这看起来很浪费(也因为我很穷) 基本上,您知道一种方法可以在不重新渲染管线的同时继续重新渲染更新标记位置的零件吗 这是我的渲染:Javascript 防止仅对组件的一部分进行状态更新时重新渲染,javascript,reactjs,react-native,state,react-native-maps,Javascript,Reactjs,React Native,State,React Native Maps,我在我的React原生应用程序中使用动态移动标记,为了使标记移动,我在一段时间间隔内进行了状态更新,用新的标记位置重新呈现屏幕。我还尝试使用react native maps directions,它使用google Routes API(这需要花钱),我不能允许Routes API每秒调用两次,因为这看起来很浪费(也因为我很穷) 基本上,您知道一种方法可以在不重新渲染管线的同时继续重新渲染更新标记位置的零件吗 这是我的渲染: render() { return ( <
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>
render(){
返回(
//这目前确实存在,而且每次都应该重新渲染,因为我需要它们移动
{this.state.markers[1]!==null&&
this.state.markers.map((marker,index)=>(
))}
///这就是渲染路由的原因,我希望它不会在每次状态更改时重新渲染
我通过创建一个新的基于外部类的组件并使用另一个shouldComponentUpdate来解决这个问题,该组件将测试目标道具是否更新。如果更新了,则重新渲染该组件,如果没有更新,则将返回已渲染的组件。非常感谢Drew Reese的提示!您尝试过包装MapViewDirections吗使用自定义“isEqual”编码>并使用函数?或拆分一个组件来渲染MapView.Marker
,在它自己的时间间隔上,与父组件隔离?@drewerese这并不是我修复它的方式,但如果你回答它时提到shouldComponentUpdate,我会给你评分。React.memo和shouldComponentUpdate基本上做相同的事情,对吗We’我们仍在使用基于类的组件。不,似乎是您根据自己的优点解决了这个问题,我只提供了一个提示/建议。顺便说一句,您可以回答自己的问题。@drewerese谢谢您的帮助,如果您改变主意,我会将您的答案标记为正确答案