reactjs - React SVG 渲染优化

Question

我用react-simple-maps制作了一张地球地图，尽我所能优化渲染，但复杂的 json 仍然很慢。

重现步骤

1. 拖动/缩放地球，检查性能
2. 将顶部无线电输入更改为区域（更复杂的 json）
3. 拖动/缩放地球（如果可以的话）

如何避免“屏幕外渲染”？

有没有办法在拖动地球时提高渲染性能？

我最后一次尝试：

export function useCameraCenterDistance() {
  const {
    center: [x, y],
  } = useCameraContext()
  return useCallback(
    (point: Coord) => {
      const distance = getDistance([x, y], point)
      return reflect(distance, 180)
    },
    [x, y]
  )
}