React 怎麼實現 Vue 的 組件

若是你用過 Vue，那確定知道它有一個很是好用的組件（keep-alive）可以保持組件的狀態來避免重複重渲染。

有時，咱們但願在列表頁面進入詳情頁面後，緩存列表頁面的狀態；當從詳情頁面返回列表頁面時，列表頁面仍是和切換前同樣。

這實際上挺難實現的，由於 React 中的組件一旦卸載就沒法重用。在 issue #12039 中提出了兩種解決方案；經過樣式來控制組件的顯示（display：none | block;），可是這可能會致使問題，例如切換組件時，沒法使用動畫；或者使用像 Mobx 和 Redux 這樣的數據流管理工具，但這太麻煩了。

因而我就本身實現了 React 版本的 react-keep-alive，它的效果和 Vue 的 <keep-alive> 相同，但在使用上有些區別。

React Keep Alive 提供了 <Provider>，你必須把 <KeepAlive> 放在 Provider 裏面，而且每一個 <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.createPortal API 將緩存的組件渲染在應用程序的外面。緩存的組件必須放在 <KeepAlive> 中，<KeepAlive> 會把在應用程序外面渲染的組件掛載到真正須要顯示的位置。

而且我還新增了兩個生命週期 componentDidActivate 和 componentWillUnactivate，新增後的生命週期：

你們有興趣能夠去個人 github 上瞅瞅，另外附上 中文文檔。

小夥伴們多提提 Issues 哈。