react-activation缓存React.lazy异步组件问题记录

最新推荐文章于 2025-03-20 16:44:11 发布

pg_li

最新推荐文章于 2025-03-20 16:44:11 发布

阅读量1.1k

点赞数 1

分类专栏： # React 前端框架文章标签： react.js 缓存前端

本文链接：https://blog.youkuaiyun.com/ligaoming_123/article/details/126857260

版权

React 同时被 2 个专栏收录

22 篇文章

订阅专栏

前端框架

3 篇文章

订阅专栏

本文主要讨论了在使用React Lazy动态加载组件和KeepAlive缓存页面时遇到的问题。作者在尝试缓存路由组件时发现无法正常工作，经过调查发现可能是因为KeepAlive不支持异步组件。为了解决这个问题，作者提出了一个解决方案，即预先缓存需要的懒加载组件，确保在下次渲染时使用的是相同的构造函数。通过这种方式成功实现了页面的缓存功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、背景
当前框架使用的路由规则是使用React.lazy动态绘制的，使用KeepAlive组件缓存时一直不能缓存

export const RouteWithChildrenSubRoutes = (route: RouteProps & RrefetchRoute) => {
    const LazyCompoent = React.lazy(() => import(`@pages/${addWebpackAliasPath(route.component)}`))
    return (
        <React.Suspense fallback={
            route.loading === false
                ? <div></div>
                : <div>{
                    route.loading === true
                        ? 'loading...'
                        : route.loading
                }</div>
        }>
            <LazyCompoent/>
        </React.Suspense>
    )
};


const KeepAliveRouter = ({router, loading, isVite, keepAlive}: SingleRouterProps) => {
    return (
        <AliveScope>
            <KeepAlive when={keepAlive === 'auto' ? !router?.hideInMenu : true} id={`${router?.path}`}>
                <RouteWithChildrenSubRoutes {...router} loading={loading} isVite={isVite}/>
            </KeepAlive>
        </AliveScope>
    )
}

排查过程

初步怀疑是不支持异步组件，查看文档发现该问题已经支持链接
接着搜索isseus查到79，函数组件下一次渲染的时候必须跟缓存起来的组件必须是一个构造函数才行。

解决思路

将需要缓存的函数组件，同时缓存起来，下一次加载时使用缓存的函数。

export const RouteWithChildrenSubRoutes = (route: RouteProps & RrefetchRoute) => {
    const _path = route?.path as string;
    if (!PrefetchLazyComponent.get(_path)) {
        PrefetchLazyComponent.add(_path, React.lazy(() => route.prefetchComponent || import(`@pages/${addWebpackAliasPath(autoComponents(route))}`)));
    }
    const LazyComponent = PrefetchLazyComponent.get(_path);
    return (
        <React.Suspense
            fallback={
                !route.loading
                    ? null
                    : <div>
                        {
                            route.loading === true
                                ? 'loading...'
                                : route.loading
                        }
                    </div>
            }>
            <LazyComponent/>
        </React.Suspense>
    )
};