lucl
2026-06-30 e44a761dbf2d609fe94ecfdeaa7335e0fcb12ba8
Revert "feat: 优化地图 rerender"

This reverts commit ff53131dd811c378f351ea42379bae052918e05d.
1个文件已删除
1个文件已修改
113 ■■■■■ 已修改文件
src/robotaxi/pages/begin-route/components/begin-route-map-canvas.tsx 74 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/robotaxi/pages/begin-route/components/begin-route-view.tsx 39 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/robotaxi/pages/begin-route/components/begin-route-map-canvas.tsx
File was deleted
src/robotaxi/pages/begin-route/components/begin-route-view.tsx
@@ -1,5 +1,4 @@
import { View, Image } from '@tarojs/components';
import { useCallback, useMemo, useRef } from 'react';
import { View, Map, Image } from '@tarojs/components';
import CustomerServicePopup from '../../../components/customer-service';
import CancelPopup from './cancel-popup';
import AnnouncementsPopup from './announcements-popup';
@@ -10,7 +9,6 @@
import AuthBluetoothPopup from './auth-bluetooth-popup';
import PrivacyPopup from '../../../../pages/robotaxi/home/components/privacy-popup';
import NoRoutePopup from './no-route-popup';
import BeginRouteMapCanvas from './begin-route-map-canvas';
import { useBeginRouteViewContext } from './begin-route-view-context';
/**
@@ -32,41 +30,24 @@
    renderCarCalloutOverlay,
  } = useBeginRouteViewContext();
  // 保持传给 BeginRouteMapCanvas 的函数属性引用稳定:上层这些 handler 每次渲染可能是新函数,
  // 直接透传会让 memo 的浅比较失效。用 ref 存最新实现,对外暴露引用恒定的包装函数。
  const handleCalloutTapRef = useRef(handleCalloutTap);
  handleCalloutTapRef.current = handleCalloutTap;
  const handleRegionChangeRef = useRef(handleRegionChange);
  handleRegionChangeRef.current = handleRegionChange;
  const onPolylineTapRef = useRef(onPolylineTap);
  onPolylineTapRef.current = onPolylineTap;
  const stableCalloutTap = useCallback((e: any) => handleCalloutTapRef.current?.(e), []);
  const stableRegionChange = useCallback((e: any) => handleRegionChangeRef.current?.(e), []);
  const stablePolylineTap = useCallback((e: any) => onPolylineTapRef.current?.(e), []);
  // 覆盖物作为 children 透传:renderMapOverlays 是 useCallback,仅在其依赖(覆盖物相关状态)变化时
  // 换引用,据此 memo 出 overlays 元素,避免无关重渲染产生新元素打穿 BeginRouteMapCanvas 的 memo。
  const overlays = useMemo(() => renderMapOverlays(), [renderMapOverlays]);
  return (
    <>
      {/* 地图画布包装组件:用 React.memo 收敛 <Map> 的重渲染,仅地图相关属性变化时才更新,
          避免行程中无关状态重渲染反复把受控相机写回原生地图导致拖动被弹回 / 视口抖动。
          覆盖物以 children 形式放入,写法与原来一致,跟车 overlay 照常随状态更新。 */}
      <BeginRouteMapCanvas
      <Map
        id='map'
        longitude={mapLongitude}
        latitude={mapLatitude}
        scale={mapScale}
        markers={markers}
        polyline={polyline}
        showLocation={showLocation}
        onCalloutTap={stableCalloutTap}
        onRegionChange={stableRegionChange}
        onPolylineTap={stablePolylineTap}
        onCalloutTap={handleCalloutTap}
        onRegionChange={handleRegionChange}
        onPolylineTap={onPolylineTap}
        // onTap={onMapTap}
        style={{ width: '100%', height: '87vh' }}
      >
        {overlays}
      </BeginRouteMapCanvas>
        {renderMapOverlays()}
      </Map>
      {/* iOS 里程气泡:作为 Map 的兄弟级普通 View 浮层,靠同层渲染浮在地图上,z-index 低于底部面板。 */}
      {renderCarCalloutOverlay()}
    </>