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

【问题标题】：React-konva slow drag performance with large number of lines rendered渲染大量线条的 React-konva 缓慢拖动性能
【发布时间】：2020-12-05 14:22:34
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript reactjs performance react-konva

【解决方案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

【讨论】：

这实际上是我一直在寻找的，而且效果很好。谢谢。