React-native-maps随状态变更频繁重渲染问题求助

问题根源 #

你遇到的问题核心是React.memo的浅比较机制失效：每次TextInput更新状态触发父组件重新渲染时，MapView的camera prop都会被重新创建为一个新对象；同时如果自定义useLocation Hook返回的location每次都是新对象，这两个因素都会让React.memo认为MapView的props发生了变化，从而触发不必要的重渲染。

解决方案 #

1. 用useMemo缓存camera对象

通过useMemo缓存camera配置，只有当location的经纬度变化时才重新生成该对象，避免父组件渲染时创建新的camera引用：

import { useMemo } from 'react';
import MapView from 'react-native-maps';

// ... 你的组件逻辑
const camera = useMemo(() => ({
  center: {
    latitude: location.lat,
    longitude: location.lng
  },
  altitude: 500,
  zoom: 12
}), [location.lat, location.lng]);

// 使用缓存后的camera
<MapView
  camera={camera}
  style={{ width: '100%', height: '100%' }}
/>

2. 让useLocation返回稳定的location引用

如果你的自定义useLocation Hook每次获取位置后都返回新的location对象，需要在Hook内部用useMemo缓存该对象，确保只有经纬度变化时才更新引用：

import { useState, useEffect, useMemo } from 'react';
import Geolocation from 'react-native-geolocation';

function useLocation() {
  const [lat, setLat] = useState(0);
  const [lng, setLng] = useState(0);

  useEffect(() => {
    const watchId = Geolocation.watchPosition(
      (position) => {
        setLat(position.coords.latitude);
        setLng(position.coords.longitude);
      },
      (error) => console.error(error)
    );
    return () => Geolocation.clearWatch(watchId);
  }, []);

  // 缓存location对象，仅在lat/lng变化时更新
  const location = useMemo(() => ({ lat, lng }), [lat, lng]);
  return location;
}

3. 用React.memo包裹MapView

确保MapView组件本身被React.memo包裹，这样当props未发生变化时不会触发重渲染：

import { memo } from 'react';
import MapView from 'react-native-maps';

const MemoizedMapView = memo(MapView);

// 使用MemoizedMapView代替原组件
<MemoizedMapView
  camera={camera}
  style={{ width: '100%', height: '100%' }}
/>

原理说明 #

React.memo默认对组件props进行浅比较，当props的引用未发生变化时，会跳过组件的重渲染。通过useMemo缓存camera和location对象，保证只有当实际的位置数据变化时，才会更新这些props的引用，从而避免TextInput状态变化导致的MapView不必要重渲染。

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