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

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.Suspensefallback={!route.loading? null: <div>{route.loading === true? 'loading...': route.loading}</div>}><LazyComponent/></React.Suspense>)
};

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

【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
ajax、promise、react、缓存笔记记录
ajax请求 1.请求基本步骤 <body><form action="###">手机号:<input type="text" n ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
class react 获取_「前端进阶」React系列九 - 受控非受控组件
源自:coderwhy 一. refs的使用在React的开发模式中,通常情况下不需要.也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作: 管理焦点,文本选择或媒体播 ...
React学习(六)-React中组件的数据-state
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 ID:suibichuanji 点击下方 ...
web前端高级React - React从入门到进阶之组件的懒加载及上下文Context
第二部分:React进阶系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到 ...
React Supense和React 异步渲染的一点矛盾
React的Suspense功能,简单说就是让组件渲染遇到需要异步操作的时候,可以无缝地"悬停"(suspense)一下,等到这个异步操作有结果的时候,再无缝地继续下去. 这里所说 ...
React 中动态的加载组件 ---loadable-components
loadable-components 用于在react 中动态的加载组件安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助
[译] React 路由和 React 组件的爱恨情仇
原文地址:The Love-Hate Relationship between React Router and React Components 原文作者:Kasra 译文出自:掘金翻译计划本文永 ...

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

排查过程

解决思路

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

最新文章

热门文章