Улучшение производительности Reactjs для рендеринга большого количества компонентов

Question

Я разрабатываю галерею, и у меня возникают проблемы с производительностью, когда я превышаю 200 компонентов.В настоящее время в моей галерее я могу фильтровать изображения и сортировать их по определенным атрибутам.Я пытался использовать «Lazy Load» для улучшения производительности, но это приносит мне другие проблемы, которых у меня не было раньше.Более того, это не решит проблему, если я все еще покажу все свои элементы.Я хотел бы попробовать что-то вроде «реагировать на виртуализацию», которая постоянно обновляет DOM, но я не знаю, как это сделать, и у меня сложилось впечатление, что «реагировать на виртуализацию» не предполагалось для работы со всеми компонентами.

Компонент My Gallery выглядит следующим образом:

const Gallery = memo(props => {
  const { imgs } = props;
  const { onClickHere } = props;
  return (
    <div className="cards-container">
      {imgs.map((img, index) => (
        <GalleryImage
          img={img}
          index={index}
          onClickHere={onClickHere}
        />
      ))}
    </div>
  );
});

Компонент My Image выглядит следующим образом:

const Image = props => {
  const { img } = props;
  const { index } = props;
  const { onClickHere } = props;
  const { alt } = props;

  return (
    <div className="cards-child">
      <div className="gallery-card">
        <img className="gallery-thumbnail" src={img.uri} alt={alt} />
        <div className="card-info">
          <span className="card-info_text">
            <span className="badge badge-secondary">
              {img.attr.join(", )} 
            </span>
          </span>
        </div>
        <span className="card-icon-open fa fa-expand" onClick={e => {onClickHere(e, img, index);}} />
      </div>
    </div>
  );
};

Эти компоненты отображают интерактивный список изображений, который одинаковразмер.Знаете ли вы, могу ли я на самом деле использовать реагирующую виртуализацию и сделал ли это плохо (если это так, можете ли вы помочь мне увидеть более четко) или знаете, как улучшить эти показатели?

Answer 1

С одной стороны, у нас есть цикл рендеринга из Virtual DOM.В этом случае React рендерит каждый компонент при изменении его реквизита или при рендеринге его родителя.

Чтобы повысить производительность, вы можете запомнить компонент так, чтобы он отображался только при смене реквизита, а не при изменении родительского элемента.Так что в вашем случае вы, вероятно, захотите запомнить Image, а не Gallery.Обратите внимание, что Gallery получает onClickHere и передает его Image.Убедитесь, что обратный вызов заключен в useCallback, поэтому новая ссылка не создается при каждом рендеринге (который memo распознает как новый параметр и отрендерит компонент).

С другой стороны, мы имеемфактический рендеринг DOM.В этом случае React будет отображать что-либо только при наличии изменений и изменять только необходимый HTML.

Плагины виртуализации помогают избежать рендеринга всего HTML и только повторного воспроизведения необходимого.Это полезно, так как браузер имеет минимально необходимый HTML, потому что, если количество узлов велико, это может привести к отставанию.Перед их выполнением постарайтесь уменьшить количество делений внутри Image до минимума.

---

Применяйте улучшения производительности только при необходимости и проверяйте, получаете ли вы от них выгоду или нет.В вашем случае основной проблемой может быть отображение слишком большого количества HTML-элементов.Также кажется, что ваша функция карты отсутствует key.