Ссылки очень медленно отображают «большие» компоненты

Question

Я работаю над приложением React, и внутри него есть страница с большим количеством графиков и большим списком, загрузка которого занимает некоторое время (зависит от производительности). Пока это нормально, но проблема заключается в следующем:

• при первом рендеринге происходит вызов API (широкое приложение, поскольку разные страницы используют одни и те же данные). При загрузке данных API показывается загрузочный счетчик
• Как только данные извлекаются, именно Redux управляет состоянием, и каждый компонент просто берет оттуда то, что ему нужно (больше не загружается).

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

Есть ли способ не перерисовать страницу? Я ожидаю, что нажмите на ссылку и сразу увидите страницу, которая уже была загружена ранее.

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

Answer 1

Есть несколько способов сделать это

Первый - не отключать компонент, просто скрыть его с помощью CSS и display: none, но это дерьмовое решение, если вы спросите меня, так как выу вас все еще будет компонент в DOM.

Еще одно решение, которое вы можете использовать, - это то, которое ребята из команды Facebook использовали при создании официального сайта для React.Как только вы наведете указатель мыши на ссылку на страницу, отправьте запрос на предварительную выборку данных для этой страницы.Таким образом, еще до того, как пользователь щелкнет, у вас уже будет отправлен запрос.

Другое решение, которое вы можете использовать, - это кэшировать данные.Если вы не беспокоитесь о пользователях с более старыми браузерами, немного подождите, пока компонент снова загрузится.Вы можете сохранить данные для компонента в localStorage, затем, когда вы собираетесь смонтировать компонент, проверить, есть ли данные в localStorage, если он там есть, просто визуализировать компонент, если нет, просто снова захватить данные.

Сочетание первого и второго параметра сделает ваш компонент почти всегда мгновенно визуализированным.

Answer 2

Если у вас есть большой набор данных компонентов для монтирования, и ваше состояние не изменяется или не влияет на повторные рендеринг, вы можете предотвратить полный демонтаж компонента.

Если вы используете реагирующий маршрутизатор, вы можете положиться на setRouteLeaveHook. Если ваше размонтирование зависит от условного рендеринга, это проще, так как вы можете скрыть свой компонент различными способами, включая css display:none