渲染 4000+ n 阶贝塞尔曲线形状时，react-konva 性能问题

Question

现在我需要使用react-konva在我的可拖动舞台中渲染数千个n阶贝泽曲线形状。它在第一次渲染中工作。但是当我拖动舞台时，fps会不稳定。有一个演示。 演示

我尝试过一些优化技巧，比如缓存贝塞尔数组计算、优化笔触、禁用完美绘图。看起来好多了，但拖动时仍然没有流畅的动画。

Answer 1

如果可能，您应该考虑缓存。它将大大提高性能：

const layerRef = React.useRef();
  React.useEffect(() => {
    layerRef.current.cache({
      width: 200,
      height: 200,
    });
  }, []);

<Layer ref={layerRef}>

演示：https://codesandbox.io/p/sandbox/konva-bezier-forked-j298rj?file=%2Fsrc%2Findex.js%3A47%2C7-47%2C29