快捷導(dǎo)航

react-router-dom?v6?通過outlet實(shí)現(xiàn)keepAlive?功能的實(shí)現(xiàn)

更新時(shí)間：2022年03月21日 10:36:08 作者：m0_67403240

本文主要介紹了react-router-dom?v6?通過outlet實(shí)現(xiàn)keepAlive功能，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文主要介紹了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í)候未重新請(qǐng)求數(shù)據(jù)。其他標(biāo)簽頁每次進(jìn)入都會(huì)重新請(qǐng)求數(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: