umi-plugin-keep-alive icon indicating copy to clipboard operation
umi-plugin-keep-alive copied to clipboard

umi@4已发布,请问会兼容吗?

Open adindefinite opened this issue 3 years ago • 10 comments

[email protected] 已发布 -> https://github.com/umijs/umi-next 当前最新版本的umi-plugin-keep-alive不兼容,useAliveController等方法无法从umi中直接导出

adindefinite avatar Jun 23 '22 07:06 adindefinite

会兼容,目前只有这一个问题吗? keep alive 功能是否正常呢

CJY0208 avatar Jun 23 '22 09:06 CJY0208

image 升级umi@4后 umi-plugin-keep-alive相关代码未做任何改动前 如上图 会报错提示把组件包裹在AliveScope内,按提示修改后keep-alive功能无法正常使用,组件内表单数据未做缓存,回退umi版本至3.5.26 所有功能正常使用 另外,顺便问下,大概什么时候可以支持[email protected],万分感谢!

adindefinite avatar Jun 23 '22 12:06 adindefinite

image 我在升级的时候是遇到这个问题

yuantongkang avatar Jun 24 '22 08:06 yuantongkang

@yuantongkang PR 合并了,发了 beta.33 可以试试,感谢~

CJY0208 avatar Jun 27 '22 04:06 CJY0208

欢迎试用 react-fiber-keep-alive,一个基于 react fiber 的 keep-alive 实现

shenjunru avatar Jun 29 '22 04:06 shenjunru

0.0.1-beta.34 在umi4中还是使用不了,报错信息同上

1769762790 avatar Aug 29 '22 09:08 1769762790

@1769762790 需要自检下 node_modules 里的版本是否确实已经升级到 beta.34,看了代码应该不会有这个报错的

CJY0208 avatar Aug 30 '22 01:08 CJY0208

目前看插件实现是加在rootContainer这一层,在路由之外,这个是否存在潜在问题? 与使用addLayout加在router之内的区别是? @CJY0208

Hfimy avatar Aug 31 '22 05:08 Hfimy

import { useAliveController } from '@umijs/max' 请问目前的最新版可以通过 @umijs/max 中引入useAliveController方法吗? 我目前用的"@umijs/max": "^4.0.83", 还是报找不到 image @CJY0208

xiaoyierle avatar Oct 09 '23 09:10 xiaoyierle

可以参考这个例子: 1.安装umi-plugin-keep-alive插件和react-activation插件(我在这里用的是pnpm add,用npm install也都可以):

pnpm add umi-plugin-keep-alive --save;

pnpm add react-activation; 2.需要在.umirc.ts文件中手动配置开启插件:

plugins: ['umi-plugin-keep-alive'], 注:这个插件名字像上面这样写才生效,起初把这个插件名字写错成了:“@umijs/max-plugin-keep-alive”,是无法使用的。

3.遇到问题:但是只要在使用了useModel的页面,再使用KeepAlive,都会报错:Uncaught TypeError: Cannot read properties of null (reading 'dispatcher')(没有使用useModel的页面,没有报错)。后来在gitHub查到还需要添加一个配置:

src/app.ts中添加如下配置:

import { autoFixContext } from 'react-activation'; import jsxDevRuntime from 'react/jsx-dev-runtime'; import jsxRuntime from 'react/jsx-runtime';

autoFixContext( [jsxRuntime, 'jsx', 'jsxs', 'jsxDEV'], [jsxDevRuntime, 'jsx', 'jsxs', 'jsxDEV'], ); 4.然后在组件中使用就不会报错啦:

import { KeepAlive } from '@umijs/max'; export default () => { return ( <> <KeepAlive name="home" when={() => { /根据路由的前进和后退状态去判断页面是否需要缓存,前进时缓存,后退时不缓存(卸载)。 when中的代码是在页面离开(卸载)时触发的。/ return history.action !== 'POP'; }} > <Home /> </KeepAlive> </> ); };

Bob1270 avatar Nov 14 '23 03:11 Bob1270