React-konva 渲染大量线条时拖动性能缓慢

Question

我在 React-konva 中有大量渲染行时拖动功能有问题。

目前我正在映射 Array.apply(null, Array(10000)) 以水平渲染线条。但是，与拖动仅 500 行的数组相比，它非常滞后。

我准备了codesandbox来说明这个问题： https://codesandbox.io/s/dazzling-hooks-0xc4s?file=/src/App.js

(鼠标水平拖动看效果)

任何解决此问题的想法都将不胜感激。

Answer 1

好吧，你的形状太多了。浏览器正在做很多工作，渲染它们。 There are many ways to improve Konva performance.

第一种方法是不渲染可见视口之外的对象：

export default function App() {
  const [camera, setCamera] = React.useState({ x: 0, y: 0 });

  const handleDragEnd = (e) => {
    setCamera({
      x: -e.target.x(),
      y: -e.target.y()
    });
  };
  return (
    <div>
      <Stage
        width={window.innerWidth}
        height={500}
        draggable
        onDragEnd={handleDragEnd}
      >
        <Layer>
          {Array.apply(null, Array(10000)).map((_, i) => {
            const x = i * 30;
            const isOut =
              x < camera.x - window.innerWidth ||
              x > camera.x + window.innerWidth * 2;
            if (isOut) {
              return null;
            }
            return (
              <>
                <Line
                  perfectDrawEnabled={false}
                  x={i * 30}
                  y={50}
                  points={[0, 600, 0, 0, 0, 0, 0, 0]}
                  stroke="black"
                />
                <Text
                  x={i * 30}
                  perfectDrawEnabled={false}
                  y={30}
                  text={i.toString()}
                  fill="black"
                />
              </>
            );
          })}
        </Layer>
      </Stage>
    </div>
  );
}

演示：https://codesandbox.io/s/react-konva-simple-windowing-render-10000-lines-2hy2u

React-konva 渲染大量线条时拖动性能缓慢

React-konva slow drag performance with large number of lines rendered

javascript

performance

reactjs

react-konva