Question

以下是其功能的一个示例： https://ostralyan.github.io/flood-fill/

此应用程序用于教育目的，这里是source code。

现在，任何大于100x100的网格都会给我带来性能问题。当我说性能问题时，我的意思是当我单击一个单元格时，在呈现下一个状态之前会有几秒钟的延迟。我的目标是对其进行优化以支持100万平方（1000x1000）。

这是我用于此方法的算法

  floodFillIterative(i, j) {
    const oldColor = this.props.squares[i][j].color;
    const newColor = this.getUniqueRandomColor(oldColor);
    const squares = this.props.squares.slice();

    const stack = [
      [i, j]
    ];
    while (stack.length) {
      const squareCoordinates = stack.pop();
      let newI = squareCoordinates[0];
      let newJ = squareCoordinates[1];

      if (newI < 0 || newI >= this.props.squaresPerRow) continue;
      if (newJ < 0 || newJ >= this.props.squaresPerRow) continue;
      let nextSquare = squares[newI][newJ];

      if (nextSquare.color !== oldColor) continue;
      if (nextSquare.visited) continue;

      Array.prototype.push.apply(stack, [
        [newI - 1, newJ],
        [newI + 1, newJ],
        [newI, newJ - 1],
        [newI, newJ + 1],
      ]);
      nextSquare.visited = true;
      nextSquare.color = newColor;
    }
    this.setState({ squares });
    this.clearVisisted(squares);
  }

该算法以线性时间运行，因此我不确定优化算法是否真的可以进一步提高性能。尽管我愿意接受任何优化建议。

我在这里也有一行代码

  shouldComponentUpdate(nextProps) {
    if (nextProps.color !== this.props.color) {
      return true;
    }

    return false;
  }

如果正方形没有变化，则可以防止正方形重新渲染。我正在寻找其他任何方法来优化此应用程序。

谢谢！

Answer 1

巨大的优化挑战！主要问题是每个Square都是一个React组件，因此您要创建大量要在DOM中呈现的元素。

在这种情况下，即使使用Redux或shouldComponentUpdate之类的东西，反应也会自然地变慢。

我强烈建议使用HTML Canvas创建单个组件而不是方形组件。

这是一个很棒的codepen，可以实时渲染大量像素：function drawAll() https://codepen.io/gunderson/full/EyXBrr

这是有关在画布上构建板的很好的教程： https://codereview.stackexchange.com/questions/164650/drawing-a-board-for-the-board-game-go-html-canvas

用呈现的数百万个组件优化此React应用的方法是什么

1 个答案: