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

Question

在 React-konva 中有大量渲染线时，我遇到了拖动功能的问题。

目前我正在映射Array.apply(null, Array(10000))以水平渲染线条。然而，与拖过一个只有 500 行的数组相比，它是非常滞后的。

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

（水平拖动鼠标查看效果）

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

标签： javascriptreactjsperformancereact-konva

Answer 1

好吧，你只是有太多的形状。浏览器正在做很多工作，将它们全部呈现出来。有很多方法可以提高 Konva 的性能。

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

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