如何在更新MapView上层文本时避免地图重绘

核心问题根源 #

当location状态更新时，父组件整体重渲染，即使MapView的props未发生变化，也会被重新创建，进而丢失缩放状态并出现闪屏。拆分组件未解决问题，通常是因为未做渲染优化或props引用不稳定。

具体解决方案 #

1. 用React.memo封装MapView组件

将MapView和Circle抽为独立组件，通过React.memo阻止不必要的重渲染，仅当传入的props变化时才更新。

2. 稳定Circle的props

对象类型的props每次渲染会生成新引用，导致memo失效，用useMemo缓存center对象，确保引用稳定。

3. 优化位置订阅逻辑

确保useEffect仅初始化一次位置订阅，并添加清理逻辑避免内存泄漏，同时可通过配置更新间隔减少不必要的状态更新。

4. 抽离独立的文本显示组件

将位置信息展示逻辑单独拆分，仅依赖location和circle状态，不影响MapView的渲染。

修改后的完整代码示例 #

import React, { useState, useEffect, useMemo, useCallback, memo } from 'react';
import { View, Text } from 'react-native';
import MapView, { Circle } from 'react-native-maps';
import * as Location from 'expo-location';

// 封装带缓存的MapView组件
const StickyMapView = memo(({ circle }) => {
  // 缓存center对象，避免每次渲染生成新引用
  const center = useMemo(() => ({
    latitude: circle.latitude,
    longitude: circle.longitude,
  }), [circle.latitude, circle.longitude]);

  return (
    <MapView 
      style={{ flex: 1 }}
      showUserLocation={true}
    >
      <Circle 
        radius={circle.radius} 
        center={center} 
        fillColor="rgba(255,0,0,0.2)"
        strokeColor="red"
      />
    </MapView>
  );
});

const MyComponent = () => {
  const [location, setLocation] = useState(null);
  const [circle, setCircle] = useState({
    radius: 5, // 单位：米
    latitude: 39.9042,
    longitude: 116.4074,
  });

  // 初始化位置订阅，仅执行一次
  useEffect(() => {
    let subscription;
    const startLocationWatch = async () => {
      // 申请位置权限
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') return;

      subscription = await Location.watchPositionAsync(
        {
          accuracy: Location.Accuracy.High,
          timeInterval: 1000, // 1秒更新一次
          distanceInterval: 1, // 移动1米更新一次
        },
        (newLocation) => {
          setLocation(newLocation);
        }
      );
    };

    startLocationWatch();

    // 组件卸载时取消订阅
    return () => {
      subscription && subscription.remove();
    };
  }, []);

  // 缓存距离计算函数，避免每次渲染生成新函数
  const isInCircleRadius = useCallback((loc) => {
    if (!loc?.coords || !circle) return false;
    
    // 用haversine公式计算两点距离（单位：米）
    const earthRadius = 6371e3;
    const lat1 = circle.latitude * Math.PI / 180;
    const lat2 = loc.coords.latitude * Math.PI / 180;
    const deltaLat = (loc.coords.latitude - circle.latitude) * Math.PI / 180;
    const deltaLon = (loc.coords.longitude - circle.longitude) * Math.PI / 180;

    const a = Math.sin(deltaLat / 2) ** 2 +
              Math.cos(lat1) * Math.cos(lat2) *
              Math.sin(deltaLon / 2) ** 2;
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    const distance = earthRadius * c;

    return distance <= circle.radius;
  }, [circle]);

  return (
    <View style={{ flex: 1 }}>
      <StickyMapView circle={circle} />
      {/* 绝对定位的文本视图 */}
      <View style={{
        position: 'absolute',
        top: 40,
        left: 20,
        backgroundColor: 'rgba(255,255,255,0.9)',
        padding: 12,
        borderRadius: 8,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.2,
        shadowRadius: 4,
        elevation: 5
      }}>
        {location ? (
          <>
            <Text style={{ fontSize: 14, marginBottom: 4 }}>
              纬度: {location.coords.latitude.toFixed(6)}
            </Text>
            <Text style={{ fontSize: 14, marginBottom: 4 }}>
              经度: {location.coords.longitude.toFixed(6)}
            </Text>
            <Text style={{ fontSize: 14, color: isInCircleRadius(location) ? 'green' : 'red' }}>
              是否在圈内: {isInCircleRadius(location) ? '是' : '否'}
            </Text>
          </>
        ) : (
          <Text style={{ fontSize: 14 }}>正在获取位置...</Text>
        )}
      </View>
    </View>
  );
};

export default MyComponent;

关键优化点说明 #

• StickyMapView通过memo包裹，仅当circle的经纬度或半径变化时才重渲染，location更新不会触发它的重绘。
• useMemo缓存center对象，避免因引用变化导致Circle组件不必要的重渲染。
• useCallback缓存isInCircleRadius函数，确保文本组件不会因函数引用变化而重渲染。
• 位置订阅的useEffect依赖为空，仅初始化一次，避免重复订阅；清理函数确保组件卸载时取消订阅，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Apoptosome