使用 react-google-maps-api 进行实时跟踪时 ReactJS 的 CPU 使用率高

如何解决使用 react-google-maps-api 进行实时跟踪时 ReactJS 的 CPU 使用率高

我有一个 ReactJS 管理面板，可以监控我们公司所有司机的位置，并使用 @react-google-maps/api 将它们绘制为标记，我还想提供实时位置跟踪。我能够绘制标记，但是当我对实时跟踪进行模拟时，cpu 使用率飙升，导致地图滞后。

这就是我绘制标记的方式

//DashboardMap.jsx
import { GoogleMap } from "@react-google-maps/api";

import Markers from "./Markers";

const DashboardMap = () => {
        return (
          <GoogleMap {...MAP_CONfig}>
            <Markers />
          </GoogleMap>
        );
};

//Markers.jsx
import { useSelector} from "react-redux";

const Markers = () => {

   const {drivers} = useSelector((state) => state.drivers);

   return (
      <React.Fragment>
         {drivers.map((driver,index) => <Marker {...driver.marker} //marker config />}
      </React.Fragment>
   );
};

为了模拟实时位置跟踪，我创建了一个间隔，每秒更新标记位置

const simulateTracking = () => {
   setInterval(() => {
        drivers.forEach(driver => {
            dispatch({type: "SIMULATE_LIVE_TRACKING",payload: {
                       driverId: driver.id,newPosition: { lat: driver.position.lat + .001,lng: driver.position.lng + .001  }
                      }
            })
        })
  },1000);

//reducer
case "SIMULATE_LIVE_TRACKING":
  const driver = _.remove(state.drivers,(item) => item.id === action.payload.driverId)[0];
  driver.marker.position = action.payload.newPosition;
  return { ...state,list: [...state.drivers,driver ] };

这目前正在运行，但问题是当驱动程序数量为 15 时 cpu 使用率飙升至 20%，而我们目前有数百个。我的猜测是因为 Markers.jsx 每次驾驶员位置改变时都会重新渲染，但我不知道如何防止这种情况发生。