解决无关状态变更引发MapMarker重复渲染的问题

问题场景 #

开发自定义标记地图系统时，父组件中修改了未被地图/标记使用的test状态，所有地图标记仍会重复渲染，出现界面闪烁。即使使用React.memo优化，问题依旧存在。

测试代码：

const [test, setTest] = useState(false);

const handleMapPress = () => {
  setTest(!test);
}

handleMapPress绑定到MapView的onPress事件，触发后所有标记重渲染。

核心原因分析 #

• MapMarker组件定义在父组件内部：父组件每次重渲染时，MapMarker都会被重新创建为新的组件类型，React.memo无法识别为同一组件，优化失效。
• 内联箭头函数作为onPress props：每次父组件渲染，() => handleMarkerPress(index, item)都会生成新的函数引用，React.memo浅比较时判定props变化，触发重渲染。
• coordinate每次渲染生成新对象：{ latitude: item.latitude, longitude: item.longitude }是每次循环创建的新对象，浅比较时判定props变化。
• 使用index作为key：虽非直接原因，但可能导致组件复用逻辑异常，建议替换为唯一标识。

具体解决方案 #

1. 将MapMarker移到父组件外部定义 #

把MapMarker提取到父组件作用域之外，确保每次父组件渲染时，组件引用保持不变：

// 移到父组件外部
const MapMarker = React.memo(({ coordinate, isActive, onPress }) => {
  return (
    <Marker coordinate={coordinate}>
      <TouchableOpacity onPress={onPress}>
        <Image
          source={
            isActive
              ? require('assets/icons8-map-marker2-64.png')
              : require('assets/icons8-map-marker-64.png')
          }
          style={{ width: 30, height: 30 }}
        />
      </TouchableOpacity>
    </Marker>
  );
});

// 父组件内部
const ParentComponent = () => {
  // ... 其他逻辑
  return (
    // ... 渲染内容
  )
}

2. 缓存onPress函数与坐标对象 #

使用useCallback缓存点击回调，用useMemo缓存坐标对象，避免每次渲染生成新引用：

// 缓存点击回调
const handleMarkerPress = useCallback((index, item) => {
  // 原handleMarkerPress业务逻辑
}, []); // 根据实际依赖添加变量，比如activeMarker等

// 渲染标记时
{data.map((item, index) => {
  // 缓存坐标对象
  const coordinate = useMemo(() => ({
    latitude: item.latitude,
    longitude: item.longitude,
  }), [item.latitude, item.longitude]);

  return (
    <MapMarker
      isActive={index === activeMarker}
      onPress={useCallback(() => handleMarkerPress(index, item), [handleMarkerPress, index, item])}
      value={item}
      key={item.id} // 替换index为item的唯一ID
      coordinate={coordinate}
    />
  );
})}

3. 自定义React.memo比较逻辑（可选） #

如果默认浅比较不够精准，可以自定义比较规则：

const MapMarker = React.memo(({ coordinate, isActive, onPress }) => {
  // ... 组件内容
}, (prevProps, nextProps) => {
  return (
    prevProps.isActive === nextProps.isActive &&
    prevProps.coordinate.latitude === nextProps.coordinate.latitude &&
    prevProps.coordinate.longitude === nextProps.coordinate.longitude &&
    prevProps.onPress === nextProps.onPress
  );
});

总结 #

通过将组件提取到外部、缓存回调和对象引用、替换唯一key这几个步骤，可以彻底解决标记无意义重渲染的问题，消除界面闪烁。

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