Остановка forEach при смене реквизита (ReactJS, Redux)

Question

Так что я не уверен в наиболее эффективном способе сделать это, или если я даже подхожу к нему правильным образом.

У меня есть приложение, которое захватывает длинный массив URL-адресов изображений (800+) while props.loading = true и загружает эти изображения в другой массив.Затем при воспроизведении слайд-шоу, созданного этими изображениями, я пытаюсь понять, как остановить загрузку изображений внутри forEach.Вот мой фрагмент для изображений:

getImages = () => {
     this.props.links.forEach(url => {
         const img = document.createElement('img');
         img.src = url;
         img.onload = () => {
              store.dispatch(addImage(img));
         } 
     })
}

Есть ли какой-нибудь способ использовать componentDidUpdate или другой подход для отключения forEach при this.props.loading = true?Мое главное беспокойство - производительность - не дожидаясь загрузки всех изображений, результирующее слайд-шоу сильно отстает, но воспроизводится без проблем после загрузки всего.

Answer 1

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

Также известно, что componentDidUpdate () запускается только после функции рендеринга.

• Вы можете попытаться лениво загрузить изображения порциями в галерею, используя response-lazy-load или новый React Suspense API, в отличие от загрузки изображений в forEach.Таким образом, в вашей галерее не будет всей логики для вычисления.Конечно, это может не сработать для вашего варианта использования, если вам действительно нужны все эти изображения в магазине.

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

  shouldComponentUpdate(nextProps, nextState){
      if(this.props.loading && !nextProps.loading){
          return true
      } else {
          return false
      }
  }
  

Answer 2

В componentDidUpdate вы можете использовать prevProps для сравнения с this.props:

componentDidUpdate(prevProps) {
  if (prevProps.links.length === this.props.links.length) {
    // links array length did not change
  }
}

Это должно позволить вам проверять и вызывать getImages только если реквизиты не обновлялись.