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