задний план
Если вы использовали Vue, вы знаете, что у него есть действительно хороший компонент (keep-alive), который сохраняет компоненты живыми, чтобы избежать повторного рендеринга.
Иногда мы хотим, чтобы страница списка кэшировала состояние страницы после входа на страницу сведений. Когда страница сведений возвращается на страницу списка, страница списка остается такой же, как и до переключения, что является очень распространенным и важным требованием в системах управления.
Но в React этого на самом деле трудно добиться, потому что после размонтирования компоненты в React нельзя использовать повторно. обсуждаемый#12039Два решения предложены в . Использование стилей для переключения отображения компонента ( display: none | block; ) может вызвать проблемы, например, вы не сможете использовать анимацию при переключении компонентов. Или используйте инструменты управления потоком данных, такие как Mobx и Redux, но это слишком громоздко.
Конечно, некоторые люди предложили новые решения.Причина, по которой свежее состояние не может быть сохранено, заключается в том, что процесс удаления выполняется в жизненном цикле.Если мы изменим маршрутизацию или отреагируем, возможно ли не выполнять процесс удаления? Предложение также было официально отклонено.
решение
мы надеемся:
- простое использование API
- Старайтесь не вмешиваться в реакцию или реакцию-маршрутизатор
- Поддержка библиотек управления данными, таких как redux mobx.
神说要有光，于是便有了光
react-activationОно возникло.
принцип
Принцип реализации относительно прост, а код ядра составляет всего 70 строк. Поскольку React будет выгружать компоненты на уровне встроенных компонентов, нам нужно извлечь компонент в компоненте, то есть его дочернее свойство, отрендерить его в компонент, который не будет выгружен, а затем использовать манипуляции с DOM для перемещения реального содержимого внутрь. Соответственно, эта функция может быть реализована.
По сути, он использует React.context для кэширования дочерних элементов, и, когда ключ кэша совпадает, подключает соответствующие дочерние элементы к соответствующему родительскому узлу.
Фактический процесс реализации столкнулся со многими проблемами из-за нарушения исходной иерархии, вызванной React, например,
Render задержка (фиксированная в активации RACT)) Функциональность контекста контекста отключена (фиксированная в активации RACT-активации) Границы ошибок не работают (фиксированные в активации RACT-ACTIVATION) Rect.Suspense & React.lazy не работает (фиксируется в активации реагирования) Реагистрационные синтетические пузырьки событий не удаются Другие неоткрытые особенности Тем не менее, большинство вышеуказанных проблем могут быть отремонтированы через механизм мостики. Для получения подробной информации, пожалуйста, обратитесь к здесьissues;
Показать результаты
упражняться
Компонент кеша обменивает пространство на время.По мере того, как кешируется все больше и больше вещей, использование памяти будет огромным, пока не произойдет сбой последней страницы. Так что лучше использовать условный кеш, который можно уничтожить вручную. Есть 2 варианта:
-
В решении с несколькими вкладками мы кэшируем все страницы, при каждом открытии страницы она будет +1 во вкладках, и к ней будет добавлена кнопка удаления, которую можно уничтожить вручную.
-
Нажмите на другие кнопки меню, чтобы выполнить уничтожение кеша. Я лично считаю, что мы кэшируем только страницы, которые нам нужны.Например, когда я работаю со страницей а, я хочу видеть меньше страницы сведений о странице а. Когда я перехожу в меню, то есть не обращаю внимания на текущее время, то выполняю событие очистки кеша, чтобы очистить все кешированные страницы.Преимущество этого в том, что пользователь не знает об этом, а процесс разработки упрощается.
Спасибо @CJY0208 за помощь.