如何配合支付宝的umijs 一起使用，支持TS吗

[wangyinwei1]

No description provided.

[CJY0208]

更新 umi 插件方案，用这个插件就好了 umi-plugin-keep-alive

不需要放置 AliveScope，直接使用 KeepAlive 即可

---

以下为早期内容

要配合 umi，可以遵循以下步骤

1. 配置 babel 插件

.umirc.js/.umirc.ts 中配置以下

const config = {
  ...
  extraBabelPlugins: ['react-activation/babel']
}

export default config

2. 寻找适合放置 <AliveScope> 的位置

<AliveScope> 作为缓存域，需要放置在不会被卸载的位置

推荐放置在应用入口处，不过 umi 没有开放应用入口编辑权限，所以可以考虑放置在 layout 中

// 示例：/src/layouts/index.js
import { AliveScope } from 'react-activation';
import styles from './index.css';

function BasicLayout(props) {
  return (
    <AliveScope>
      <div className={styles.normal}>
        <h1 className={styles.title}>Yay! Welcome to umi!</h1>
        {props.children}
      </div>
    </AliveScope>
  );
}

export default BasicLayout;

---

完成上述步骤后，可按文档说明正常使用 react-activation 的 <KeepAlive> 功能

Typescript 注意要点

由于 react-activation/babel 需要对 jsx 元素进行标记，而 umi 中 tsx 内容会优先经过 ts-loader 才会经过 babel-loader，故 ts-loader 需要注意配置为不对 jsx 进行处理以保护 react-activation/babel 对文件的处理权

配置方法为修改项目的 tsconfig.json 文件，将 compilerOptions.jsx 属性调整为 preserve，其余不变

{
  "compilerOptions": {
    ...
    "jsx": "preserve",
    ...
  }
}

[wangyinwei1]

react-activation/babel 这可以直接yarn add react-activation/babel ？这个库npm好像没找到

[CJY0208]

@wangyinwei1

安装 react-activation 就行，babel 是附带的功能，参考文档安装及使用

[CJY0208]

另外可以关注 umi 配合 react-router-cache-route 实现路由级别 keep-alive 功能的 issues

umijs/umi#3091

[wangyinwei1]

请问 react-activation和react-router-cache-route建议使用哪个

[wangyinwei1]

react-activation 可以使用react-keep-alive的Provider作为做外层吗？是不是引入 react-activation外层都一样，都不会被影响。或者说这个目前版本稳定吗

[CJY0208]

建议使用cache-route，如果使用react-activation的话就不需要react-keep-alive了，不能使用react-keep-alive的Provider作为外层

两者定位一致

[CJY0208]

如果你急需 keepAlive 功能，建议先使用 react-activation，我已经做过 umi 的接入尝试，相对来说是比较快速的接入方案

[wangyinwei1]

umi-plugin-cache-route umi提供了这个插件应该可以使用吧

[CJY0208]

umi-plugin-cache-route umi提供了这个插件应该可以使用吧

可以使用，不过你需要问 @xiaohuoni 同学

如果是 react-activation 的话，我这边可以提供引导

[wangyinwei1]

umi-plugin-cache-route 好像直接是生产环境覆盖的。开发环境好像不行吧

[wangyinwei1]

好的 打算用这个react-activation 试试。就是做那种tags

[CJY0208]

@lebron112 Here，可以尝试 react-activation

[CJY0208]

@wangyinwei1 可以加我微信 375564567，目前 umi 的 keep-alive 提案处于在进程中，我个人响应也许快些

[CJY0208]

新增 umi 插件方案，umi-plugin-keep-alive，使用方式参考：https://github.com/alitajs/umi-plugin-keep-alive

[lebron112]

好的，谢谢 597528869 邮箱：597528869@qq.com 签名由 网易邮箱大师 定制 在2019年11月11日 12:04，CJY 写道： 新增 umi 插件方案，umi-plugin-keep-alive，使用方式参考：https://github.com/alitajs/umi-plugin-keep-alive — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[LiuL0703]

@CJY0208 在umi中配置后不生效可能是什么原因呢

[CJY0208]

@CJY0208 在umi中配置后不生效可能是什么原因呢

具体如何配置，如何使用？

[LiuL0703]

在config里配置

export default {
...
plugins,
routes,
extraBabelPlugins: ['react-activation/babel'],
...
}

然后在Layout入口处配置了AliveScope

在子组件里配置KeepAlive

"react": "16.12.0",
"react-activation": "^0.3.4",
"umi": "2.10.6",

[CJY0208]

在config里配置

export default {
...
plugins,
routes,
extraBabelPlugins: ['react-activation/babel'],
...
}

然后在Layout入口处配置了AliveScope

在子组件里配置KeepAlive

"react": "16.12.0",
"react-activation": "^0.3.4",
"umi": "2.10.6",

放置 AliveScope 的 Layout 是否在过程中被置换掉了？如果 AliveScope 随之卸载，那缓存就失效了

放置在 Layout 中是不得已的选择，因为 umi 没有开放应用入口的编辑权限

另外是否有尝试过 umi-plugin-keep-alive ？这个库以插件形式，寻找到了比较合适的 AliveScope 放置位置

[LiuL0703]

我是从 umi-plugin-cache-route过来的 因为嵌套路由的问题 所以看到issue里有提到这个库 我就想试试 AliveScope 是放在最外层了

所以也不知道具体哪里的问题 😵
我去试试umi-plugin-keep-alive 非常感谢百忙之中的回复

============
umi-plugin-keep-alive 也是未生效

[CJY0208]

@LiuL0703 移步此处讨论 alitajs/umi-plugin-keep-alive#5

[MinJieLiu]

基于 umi-plugin-keep-alive 改了个 umi-plugin-activation-route-modify 以支持路由 KeepAlive 😂

[AlanSean]

在 umi中配置

#src/app.ts

import React from 'react';
import { Toast } from 'antd-mobile';
import { AliveScope } from 'react-activation';


export function rootContainer(container: React.ReactNode) {
    return React.createElement(AliveScope, null, container);
}

运行时配置v2 v3 都支持

目前使用没有任何问题

可在我司和pp体育合作的项目进行真机线上体验

安装 PP体育 — 彩票栏目 — 竞彩宝典

[CJY0208]

这个 rootContainer 好像会包在 Router 外部，导致 KeepAlive 内部的组件无法使用 withRouter 等依赖路由上下文的功能，所以一直没处理

[MinJieLiu]

umijs/umi#4094

[CJY0208]

umi-plugin-keep-alive@0.0.1-beta.9 已支持 umi@3.x

[bt9396118]

umi3在.umirc.ts当中配置
plugins: [
'umi-plugin-keep-alive'
]
会报错
plugin umi-plugin-keep-alive is already registered by D:/project/baolixukai_副本(1)/baolixukai_副本/node_modules/umi-plugin-keep-alive/lib/index.js, plugin from D:/project/baolixukai_副本(1)/baolixukai_副本/node_modules/umi-plugin-keep-alive/lib/index.js register failed.

[CJY0208]

umi3在.umirc.ts当中配置
plugins: [
'umi-plugin-keep-alive'
]
会报错
plugin umi-plugin-keep-alive is already registered by D:/project/baolixukai_副本(1)/baolixukai_副本/node_modules/umi-plugin-keep-alive/lib/index.js, plugin from D:/project/baolixukai_副本(1)/baolixukai_副本/node_modules/umi-plugin-keep-alive/lib/index.js register failed.

说明写错了，umi 3 似乎会自动注册 umi-plugins-* 依赖，所以只需要安装依赖就好，不需要在 umirc 中声明了

[thelaurelyy]

hello~我们在使用 ** umi-plugin-keep-alive** 的过程中发现，KeepAlive包裹的组件原本引用的antd样式全部丢失，请问是哪里使用不当吗？ @CJY0208

[CJY0208]

hello~我们在使用 ** umi-plugin-keep-alive** 的过程中发现，KeepAlive包裹的组件原本引用的antd样式全部丢失，请问是哪里使用不当吗？ @CJY0208

KeepAlive 感觉不应该对这块有影响，有在 devtools 中看到关于 antd 样式类名缺失之类的问题吗？是否有使用 react-css-module 之类的工具

[thelaurelyy]

hello~我们在使用 ** umi-plugin-keep-alive** 的过程中发现，KeepAlive包裹的组件原本引用的antd样式全部丢失，请问是哪里使用不当吗？ @CJY0208

KeepAlive 感觉不应该对这块有影响，有在 devtools 中看到关于 antd 样式类名缺失之类的问题吗？是否有使用 react-css-module 之类的工具

查验代码发现，是由于antd的全局化配置中prefixCls失效，导致样式不匹配（children无法共享 ConfigProvider 提供的 context 信息）。如果我们想要在框架中自定义统一样式前缀，该怎样搭配umi-plugin-keep-alive使用呢？ @CJY0208

[cyndra0]

hello~我们在使用 ** umi-plugin-keep-alive** 的过程中发现，KeepAlive包裹的组件原本引用的antd样式全部丢失，请问是哪里使用不当吗？ @CJY0208

KeepAlive 感觉不应该对这块有影响，有在 devtools 中看到关于 antd 样式类名缺失之类的问题吗？是否有使用 react-css-module 之类的工具

查验代码发现，是由于antd的全局化配置中prefixCls失效，导致样式不匹配（children无法共享 ConfigProvider 提供的 context 信息）。如果我们想要在框架中自定义统一样式前缀，该怎样搭配umi-plugin-keep-alive使用呢？ @CJY0208

我是直接使用 react-activation + babelPlugin，然后将 AliveScrope 置于各类 Provider 内层。因为通过 plugin 的方式使用的话好像会用 rootContainer 直接把它作为 root 注入导致 Context 被破坏。

<ConfigProvider {...antdConfig}>
  <AliveScope>{props.children}></AliveScope>
</ConfigProvider>

[CJY0208]

@thelaurelyy @cyndra0
一直忘了回复...

可以使用 fixContext 修复 ConfigProvider 的上下文，具体如下

import { ConfigProvider } from 'antd'
import { fixContext  } from 'react-activation'
// or import { fixContext } from 'umi''

fixContext(ConfigProvider.ConfigContext)

类似问题可参考 alitajs/umi-plugin-keep-alive#30