Как оптимизировать это реагирующее приложение, используя потенциально миллионы представленных компонентов?

Question

Вот пример того, что он делает: https://ostralyan.github.io/flood-fill/

Это приложение для образовательных целей, а вот исходный код .

Сейчас все, что больше, чем сетка 100x100, вызывает проблемы с производительностью. Когда я говорю о проблемах с производительностью, я имею в виду, что когда я щелкаю по ячейке, она задерживается на несколько секунд, прежде чем она отобразит следующее состояние. Моя цель - оптимизировать это для поддержки квадратов 1м (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

Отличная оптимизация! Основная проблема заключается в том, что каждый квадрат является компонентом реакции, поэтому вы создаете огромное количество элементов для рендеринга в DOM.

В этом случае React будет естественно замедляться, даже если вы используете что-то вроде Redux или shouldComponentUpdate, как вы используете.

Я бы настоятельно рекомендовал создать отдельный компонент с использованием HTML-холста для рендеринга на плате вместо Square Components.

Вот отличный кодовый блок, который отображает тонну пикселей в реальном времени: function drawAll() https://codepen.io/gunderson/full/EyXBrr

А вот хороший урок по созданию доски на холсте: https://codereview.stackexchange.com/questions/164650/drawing-a-board-for-the-board-game-go-html-canvas