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 哈。