Как кэшировать или предотвратить повторную визуализацию большого компонента реагента

Question

У меня есть одностраничная заявка на реагент.В корневом компоненте у меня есть диспетчер маршрута, который отображает компонент в соответствии с маршрутом.Что-то вроде:

(defn page []
  [(get component-lookup @current-page-name)])

У меня есть страница списка и страница сведений, где пользователь часто переключается назад и вперед.

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

Моя первая попытка оптимизации состоит в том, чтобы обе страницы отображались постоянно, нодобавляйте display:none всякий раз, когда они не видны.Это ускоряет переход страниц, но меняет смысл методов жизненного цикла.Например, component-did-mount будет выполняться, но компонент не виден, и я не могу обновить его положение прокрутки.

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

Answer 1

Я не думаю, что вы сможете сделать это без разветвления реакции.Жизненные циклы неразрывно связаны с модификациями виртуального домена - в этом вся их суть существования.

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