React怎麼實現Vue的組件

NO IMAGE

如果你用過 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> 會把在應用程序外面渲染的組件掛載到真正需要顯示的位置。

並且我還新增了兩個生命週期 componentDidActivatecomponentWillUnactivate,新增後的生命週期: