react-router-dom?v6?通過outlet實(shí)現(xiàn)keepAlive?功能的實(shí)現(xiàn)
本文主要介紹了react-router-dom v6 通過outlet實(shí)現(xiàn)keepAlive 功能的實(shí)現(xiàn),具體如下:
keepAlive代碼:
import React, { useRef, useEffect, useReducer, useMemo, memo } from 'react' import { TransitionGroup, CSSTransition } from 'react-transition-group' import { useLocation } from 'react-router-dom' const KeepAlive = props => { const { include, keys, children } = props const { pathname } = useLocation() const componentList = useRef(new Map()) const forceUpdate = useReducer(bool => !bool)[1] // 強(qiáng)制渲染 const cacheKey = useMemo(() => pathname + "__" + keys[pathname], [pathname, keys]) // eslint-disable-line const activeKey = useRef(null) useEffect(() => { componentList.current.forEach(function(value, key) { const _key = key.split("__")[0] if (!include.includes(_key) || (_key === pathname)) { this.delete(key) } }, componentList.current) activeKey.current = cacheKey if (!componentList.current.has(activeKey.current)) { componentList.current.set(activeKey.current, children) } forceUpdate() }, [cacheKey, include]) // eslint-disable-line return ( <TransitionGroup component={ null }> { Array.from(componentList.current).map(([key, component]) => <CSSTransition key={ key } appear={ true } timeout={ 500 } classNames='fade'> { key === activeKey.current ? <div className={ `layout-container${include.includes(key.split("__")[0]) ? " keep-alive-fade": ""}` }> { component } </div> : <div className='layout-container__keep-alive' style={{ display: 'none' }}> { component } </div> } </CSSTransition> ) } </TransitionGroup> ) } export default memo(KeepAlive)
main.js 中調(diào)用
import PropTypes from 'prop-types' import { useLocation, useOutlet } from 'react-router-dom' import { connect } from 'react-redux' import { Layout } from 'antd' import { TransitionGroup, CSSTransition } from 'react-transition-group' import KeepAlive from '@/components/common/keepAlive' import { isKeepAlive } from '@/service/config' const Main = props => { const { fullScreen, cacheRoutes, cacheKeys } = props const outlet = useOutlet() const { pathname } = useLocation() return ( <Layout.Content className={{ "layout-main": true, "full-screen": fullScreen }}> <section> { // isKeepAlive 生產(chǎn)環(huán)境中啟用緩存 isKeepAlive ? <KeepAlive include={ cacheRoutes } keys={ cacheKeys }> { outlet } // 此處不能用 <Outlet /> 不然無法通過 useRef 來緩存 </KeepAlive> : <TransitionGroup component={ null }> <CSSTransition key={ pathname + cacheKeys[pathname] } appear={ true } timeout={ 500 } classNames='page-fade'> { outlet } // 此處不能用 <Outlet /> 會(huì)造成路由切換時(shí),組件重復(fù)渲染 </CSSTransition> </TransitionGroup> } </section> </Layout.Content> ) } Main.propTypes = { fullScreen: PropTypes.bool, cacheRoutes: PropTypes.array, cacheKeys: PropTypes.object } const mapStateToProps = state => { return { fullScreen: state.setting.fullScreen, cacheRoutes: state.tabsBar.cacheRoutes, // 需要緩存的路由組件path數(shù)組 cacheKeys: state.tabsBar.cacheKeys // 用于組件局部刷新 } } export default connect(mapStateToProps)(Main)
1、當(dāng)前圖片動(dòng)畫中,只設(shè)置了第二個(gè)標(biāo)簽頁緩存,其他的幾個(gè)未開啟緩存,所以可以看到,只有第二個(gè)標(biāo)簽頁在切回的時(shí)候 未重新請求數(shù)據(jù)。其他標(biāo)簽頁每次進(jìn)入都會(huì)重新請求數(shù)據(jù)。
2、此外這里結(jié)合react-transition-group 實(shí)現(xiàn)了路由切換的漸隱漸顯動(dòng)畫,但需要手動(dòng)配合css樣式控制,不能完全依靠CSSTransition
代碼部分:
// 路由進(jìn)入動(dòng)畫 .fade-enter, .fade-appear { opacity: 0; } .fade-enter-active, .fade-appear-active { opacity: 1; @include transition(opacity .25s cubic-bezier(.645, .045, .355, 1) .25s); } .fade-exit { opacity: 1; z-index: 1; } .fade-exit-active { opacity: 0; z-index: 1; @include transition(opacity .25s cubic-bezier(.645, .045, .355, 1)); } .page-fade-enter, .page-fade-appear { opacity: 0; } .page-fade-enter-active, .page-fade-appear-active { opacity: 1; @include transition(opacity .5s cubic-bezier(.645, .045, .355, 1)); } .page-fade-exit { opacity: 1; display: none!important; } .page-fade-exit-active { opacity: 0; } @keyframes keepAliveFade { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } .layout-container { position: absolute; left: 0; right: 0; top: 0; bottom: 0; &.keep-alive-fade { animation: keepAliveFade .5s ease-in-out; } }
到此這篇關(guān)于react-router-dom v6 通過outlet實(shí)現(xiàn)keepAlive 功能的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)react-router keepAlive 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript 函數(shù)中的參數(shù)使用分析
關(guān)于JS中的函數(shù),相信大家已經(jīng)很了解了,其中有些特性呢,感覺還是值得提一提的,下面就說說JS中的函數(shù)吧。2010-03-03JavaScript高級程序設(shè)計(jì) 事件學(xué)習(xí)筆記
JavaScript高級程序設(shè)計(jì) 事件學(xué)習(xí)筆記,需要的朋友可以參考下。2011-09-09JavaScript事件冒泡機(jī)制原理實(shí)例解析
這篇文章主要介紹了JavaScript事件冒泡機(jī)制原理實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01JS網(wǎng)頁播放聲音實(shí)現(xiàn)代碼兼容各種瀏覽器
JS網(wǎng)頁播放聲音有多種方法可以實(shí)現(xiàn),不過兼容各種瀏覽器的就沒有幾個(gè)了,不過本文的這個(gè)示例或許對大家有所幫助2013-09-09jquery實(shí)現(xiàn)瀑布流效果 jquery下拉加載新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)瀑布流效果,下拉加載新數(shù)據(jù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12