Остановка forEach при изменении свойства (ReactJS, Redux)
Так что я не уверен в том, как это сделать наиболее эффективно, и правильно ли я к нему подхожу.
У меня есть приложение, которое захватывает длинный массив URL-адресов изображений (800+) в то время как 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? Меня больше всего беспокоит производительность - без ожидания загрузки всех изображений получающееся слайд-шоу сильно тормозит, но воспроизводится без проблем после того, как все загружено.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В componentDidUpdate вы можете использовать prevProps для сравнения с this.props:
componentDidUpdate(prevProps) {
if (prevProps.links.length === this.props.links.length) {
// links array length did not change
}
}
Это должно позволить вам проверять и вызывать getImages только в том случае, если реквизиты не обновлялись.
Ах я вижу. Я не уверен, как это можно остановить - cDU запускается при изменении свойств, поэтому простая условная проверка «перезапустит» cDU (я полагаю). Мне кажется, что более серьезной проблемой для меня является то, что если бы вы «остановили» его, вы потенциально запускали диспетчеризацию больше раз, чем необходимо, но мне может не хватать того, что делает или для чего предназначен ваш код.
Во-первых, действительно ли вам нужно, чтобы все эти изображения загружались в ваш магазин при каждом рендеринге? Ваше замедление, скорее всего, вызвано количеством действий, которые вы выполняете каждый раз при рендеринге компонента. Не могли бы вы поделиться остальной частью кода компонента и кодом редуктора или связать репо? Не видя остальной части кода, я могу придумать несколько вещей, которые вы можете попробовать.
Также знайте, что componentDidUpdate () запускается только после функции рендеринга.
Вы можете попробовать отложить загрузку изображений кусками в галерею с помощью реагировать на ленивую загрузку или нового React Suspense API вместо загрузки изображений в forEach. Таким образом, в вашей галерее не будет всей предварительной логики для вычислений. Конечно, это может не сработать для вашего варианта использования, если вам действительно нужны все эти изображения в магазине.
Вы можете попытаться использовать
shouldComponentUpdate()для реализации некоторой логики, если компонент действительно должен согласовать и повторно отрисовать, но это все равно не будет учитывать начальную загрузку, а только последующие загрузки. Вам также необходимо убедиться, что вы не отправляете действия для изображений, которые уже находятся в магазине.shouldComponentUpdate(nextProps, nextState){ if (this.props.loading && !nextProps.loading){ return true } else { return false } }
Извините, возможно, я просил не то. Я предварительно загружаю все URL-адреса (асинхронно), затем запускаю загрузчик изображений. Я хочу иметь возможность убить загрузчик образов для каждого по желанию, если
this.props.loading = false. Уже используется то, что вы опубликовали, для запуска предварительного загрузчика URL!