无需重新渲染的 API 坐标？,javascript,react-native,google-maps,react-native-maps"/>
时间戳

首页 > 解决方案 > 有没有办法改变 react-native-maps无需重新渲染的 API 坐标？

javascript - 有没有办法改变 react-native-maps无需重新渲染的 API 坐标？

问题描述

参考：如何在不重新渲染地图视图的情况下更新标记位置？反应原生地图

我的目标是防止在用户拖动地图同时更改市场坐标时重新渲染。目前的解决方案是使用useState钩子。但这会导致组件重新渲染，从而导致应用程序滞后。

我尝试使用let variable，但它不会移动marker.

tl:drScreen.js

import React from 'react';
import {StyleSheet, View} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

带有 useState 的 Screen.js（昂贵的重新渲染）

export default function GoSendDestinationDetails() {
  const [coordinate, setCoordinate] = React.useState({
    latitude: -6.1754,
    longitude: 106.8272,
    latitudeDelta: 0.015,
    longitudeDelta: 0.0121,
  });
  const handleRegionChange = (region) => {
    setCoordinate(region);
    console.log(region);
  };

  console.log('re-render');

  return (
    <View style={styles.container}>
      <MapView
        provider={PROVIDER_GOOGLE} // remove if not using Google Maps
        style={styles.map}
        initialRegion={coordinate}
        onRegionChange={handleRegionChange}>
        <MarkerMemo />
      </MapView>
    </View>
  );
}

我试过的：

带有 let 变量的 Screen.js

export default function GoSendDestinationDetails() {
  let coordinate = {
    latitude: -6.1754,
    longitude: 106.8272,
    latitudeDelta: 0.015,
    longitudeDelta: 0.0121,
  };
  const handleRegionChange = (region) => {
    coordinate = region;
    console.log(region);
  };

  // this does not update the marker when coordinate changes
  const MarkerMemo = React.memo(() => <Marker coordinate={coordinate} />)

  console.log('re-render');
  return (
    <View style={styles.container}>
      <MapView
        provider={PROVIDER_GOOGLE} // remove if not using Google Maps
        style={styles.map}
        initialRegion={coordinate}
        onRegionChange={handleRegionChange}>
        <MarkerMemo />
      </MapView>
    </View>
  );
}

标签： javascriptreact-nativegoogle-mapsreact-native-maps

解决方案

useStateHook 给了你两件事：

  • 将在渲染中持续存在的值
  • 用于更新该值并触发重新渲染的 API 。

如果您有一个不关心重新渲染的用例，但您确实需要在渲染之间保留一个值，那么您需要其中的一半useState让您在渲染之间保留一个值，而不是另一半触发重新渲染-使成为。

useRef而这正是

useRef() Hook 不仅适用于 DOM 引用。“ref”对象是一个通用容器，其当前属性是可变的并且可以保存任何值

https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables

推荐阅读