Javascript 使用可能呈现的数百万组件优化react应用程序的方法有哪些

下面是一个示例，说明它的作用：

此应用程序用于教育目的，下面是

现在，任何大于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);
  }

这可以防止方块在没有任何变化的情况下重新渲染。我正在寻找任何其他方法来优化这个应用程序

---

谢谢

巨大的优化挑战！主要的问题是，每个正方形都是一个react组件，因此要在DOM中创建大量的元素进行渲染

在这种情况下，React自然会变慢，即使使用Redux或shouldComponentUpdate之类的东西时也是如此

我强烈建议您使用HTML画布创建一个单一组件，而不是方形组件来进行电路板渲染

这里有一个很棒的代码笔，它可以实时渲染大量像素：

function drawAll（）

下面是一个关于在画布上构建图板的好教程：

---

Dom总是很难更新这么多元素。我建议您使用画布和绘图操作，而不是解决这个问题。据我所知，我认为它将使每个前端框架弯曲。

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

    return false;
  }