Как React реализует компонент Vue <keep-alive>

React.js
Как React реализует компонент Vue <keep-alive>

если вы использовалиVue, вы должны знать, что у него есть очень полезный компонент (keep-alive), чтобы сохранить состояние компонента и избежать повторного повторного рендеринга.

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

На самом деле этого довольно сложно достичь, потому что компоненты в React нельзя использовать повторно после размонтирования. существуетissue #12039Два решения предложены в ; управлять отображением компонентов через стили (display：none | block;), но это может вызвать проблемы, например, при переключении компонентов, без использования анимации или при использовании инструментов управления потоком данных, таких как Mobx и Redux, но это слишком громоздко.

Поэтому я сам реализовал версию Reactreact-keep-alive, который имеет тот же эффект, что и Vue<keep-alive>То же самое, но есть некоторые различия в использовании.

React Keep Alive предоставляет<Provider>, вы должны поставить<KeepAlive>поставить в Провайдере, и каждый<KeepAlive>Компоненты должны иметь уникальныйkey.

import React from 'react';
import ReactDOM from 'react-dom';
import {
  Provider,
  KeepAlive,
} from 'react-keep-alive';
import Test from './views/Test';

ReactDOM.render(
  <Provider>
    <KeepAlive key="Test">
      <Test />
    </KeepAlive>
  </Provider>,
  document.getElementById('root'),
);

react-keep-aliveчерезReact.createPortal APIосуществленный.react-keep-aliveЕсть два основных компонента<Provider>а также<KeepAlive>;<Provider>Отвечает за сохранение кеша компонента и его передачу перед обработкой.React.createPortalAPI отображает кэшированные компоненты вне приложения. Кэшированные компоненты должны быть помещены в<KeepAlive>середина,<KeepAlive>Он будет монтировать компоненты, визуализированные вне приложения, там, где они действительно должны отображаться.

А еще я добавил два новых жизненных циклаcomponentDidActivateа такжеcomponentWillUnactivate, добавленный жизненный цикл:

Lifecycle after adding

Если вам интересно, вы можете зайти ко мнеgithubПроверь и прикрепикитайский документ.

Друзья, отметьтеIssuesкакие.

Категории