在 React 中缓存 Konvajs 形状以处理大型重复形状的正确方法

Question

我正在尝试优化 KonvaJS 性能。一种方法是缓存形状。在这里，我尝试以不同的位置绘制 1000 次相同的形状。 谢谢！ 这是我的代码：

export default function AircraftLayer() {
  const { aircrafts } = useAircraft() //1000 objects
  const rectLabelRef = useRef<Konva.Rect>(null)

  useEffect(() => {
    if (rectLabelRef.current) {
      rectLabelRef.current.cache()
    }
  }, [rectLabelRef])

  return (
    <Layer>
      {aircrafts.map((aircraft) => (
        <Rect
          ref={rectLabelRef}
          width={120}
          height={40}
          fill={'red'}
          perfectDrawEnabled={false}
          hitStrokeWidth={0}
          shadowForStrokeEnabled={false}
          x={aircraft.positionX}
          y={aircraft.positionY}
        />
      ))}
    </Layer>
  )
}

我尝试使用 React ref 来做到这一点，但没有结果......

Answer 1

首先，我不建议缓存每个简单的矩形。它不会提高性能，甚至可能会下降。

在此处阅读一些缓存技巧：https://konvajs.org/docs/performance/Shape_Caching.html

您不能对多个 React 元素使用相同的

ref

。您必须将每个矩形隔离成自己的：

function MyShape({ aircraft }) {
  const rectLabelRef = useRef<Konva.Rect>(null)

  useEffect(() => {
    if (rectLabelRef.current) {
      rectLabelRef.current.cache()
    }
  }, [rectLabelRef])

  return (
        <Rect
          ref={rectLabelRef}
          width={120}
          height={40}
          fill={'red'}
          perfectDrawEnabled={false}
          hitStrokeWidth={0}
          shadowForStrokeEnabled={false}
          x={aircraft.positionX}
          y={aircraft.positionY}
        />
  )
}

export default function AircraftLayer() {
  const { aircrafts } = useAircraft() //1000 objects
 
  return (
    <Layer>
      {aircrafts.map((aircraft) => (
        <MyShape
          aircraft={aircraft}
          key={aircraft.id}
        />
      ))}
    </Layer>
  )
}