Umi: [RFC] umi@3 支持Keep Alive 试用方案

[xiaohuoni]

可以使用 @alitajs/keep-alive。需要使用组件包裹 layout 的最内层。原理就是劫持了 children

安装

yarn add @alitajs/keep-alive

配置

export default {
  plugins:['@alitajs/keep-alive'],
  keepalive:['/list']
}

使用

// src/layouts/index.tsx
import { KeepAliveLayout } from 'umi';
const BasicLayout: React.FC = props => {
  return (
    <OtherLayout >
        <KeepAliveLayout {...props}>{children}</KeepAliveLayout>
    </OtherLayout>
  );
};

解除缓存

// src/pages/list/index.tsx
import { dropByCacheKey } from 'umi';
const Page: React.FC = props => {
  return (
      <div onClick={()=>{
          dropByCacheKey('/list');
      }}>Click dropByCacheKey
    </div>
  );
};

[hzcdt]

也许还有方案三，其它方案都是基于路由的做缓存，而且都是通过display:none|block来控制组件的展示和隐藏，而我前两天在github意外发现的react-keep-alive是通过 React.createPortal把需要缓存的组件渲染到应用程序的外面，这样就是直接基于组件而不是基于路由，对react-router就没那么大的依赖了

[hzcdt]

https://github.com/StructureBuilder/react-keep-alive/blob/master/README.zh-CN.md

[xiaohuoni]

欢迎讨论

[CJY0208]

也许还有方案三，其它方案都是基于路由的做缓存，而且都是通过display:none|block来控制组件的展示和隐藏，而我前两天在github意外发现的react-keep-alive是通过 React.createPortal把需要缓存的组件渲染到应用程序的外面，这样就是直接基于组件而不是基于路由，对react-router就没那么大的依赖了

react-keep-alive 如果能完全实现的话，应该是更好的方案，不过目前有发现对 React 的 Context 功能造成影响，今天给作者提供了 issue

https://github.com/StructureBuilder/react-keep-alive/issues/36

[CJY0208]

补充最近开发的工具，react-activation ，纯粹的、不依赖 Router 的 <KeepAlive> 方案

但由于实现方式原因，将对 React 本身造成一定影响，仅做方案补充

示例

[AielloChan]

Try https://github.com/AielloChan/KeepAliveRoute

[yruson]

着实有必要官方支持

[johanazhu]

下个项目用3试试

[zhfish]

顶一下~~

[huzhichong]

给力，解决了我疼痛的问题。

[snice]

umi3 集成失败

[xiaohuoni]

@snice 是要结合layout使用吧。用 @alitajs/plugin-layout ，https://github.com/alitajs/alita/issues/128

[stillyu]

Cannot read property 'pathname' of undefined at BasicLayout.render (KeepAliveLayout.tsx:72)
umi3，集成失败

[xiaohuoni]

@stillyu props需要透传，你应该是漏了

[xiaoshuoyiyi]

大佬，上面那个配置，是在哪个配置文件里的？

[xiaohuoni]

@xiaoshuoyiyi 说的配置指的是 umirc 或者 config/config 文件。运行时配置指的是 src/app 。所有的 umi 文档都是这样

[pwh19920920]

测试中发现，@alitajs/keep-alive方案如果在我的layout里存在tabBar，tabBar不会被初始化。

[xiaohuoni]

@pwh19920920 https://github.com/alitajs/alita/tree/master/packages/layout 看看这里，是没有问题的。如果你的场景有问题，可以给一个复现demo。

[Jsen0926]

@alitajs/keep-alive方案目前初次尝试问题不大，但是生成的 class="rumtime-keep-alive-layout"里面的第一级元素为什么要使用 position: "absolute" 定位？是有特殊考虑吗

[xiaohuoni]

@Jsen0926
之前在rn中的用法，有没撑开页面的问题，所以这么写了。一直没改。有影响到你们的布局吗？

[pwh19920920]

@pwh19920920 https://github.com/alitajs/alita/tree/master/packages/layout 看看这里，是没有问题的。如果你的场景有问题，可以给一个复现demo。

能否给个demo，这个文档愣是没看懂。。。

[finalreturn]

mark 等一个Keep Alive，满足多tab

[xiaohuoni]

@finalreturn https://www.npmjs.com/package/@alitajs/@alitajs/tabs-layout 同样技术实现的，多tabs 。可以尝试能否解决，预览页面 https://pro.alitajs.com/

[xiaohuoni]

这个 issues 锁了，有疑问和其他问题可以，单独找我，或者另开 issues

[xiaohuoni]

umi-plugin-keep-alive 支持 umi3.x了
https://github.com/alitajs/umi-plugin-keep-alive