react-activation结合umi使用方法

在 umi 框架中发现结合 ant design 无法缓存表格或页面，因此在这里总结一下目前所使用的方案

# react-activation 结合 umi 缓存页面

# 使用原因

由于 ant design 的表格并没有带有缓存功能,导致在表格中打开其他页面将造成返回时页面刷新的问题。因此引入开源插件 react-activation 来做页面的缓存

# 结合 umi 使用方法

# 1. 使用 npm 或者 yarn 安装插件

yarn add react-activation
# or
npm install react-activation

1
2
3

# 2. 在 umi 中进行配置

.umirc.js 或者 config.js 中配置以下

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

1
2
3
4

# 3. 在 layout 中包裹标签来劫持 children

import { AliveScope } from 'react-activation';
import styles from './index.css';

function BasicLayout(props) {
  return (
    <AliveScope>
      <div className={styles.normal}>
        {props.children}
      </div>
    </AliveScope>
  );

1
2
3
4
5
6
7
8
9
10
11

# 4. 在需要的页面使用缓存

该组件官方的用法是通过标签包裹组件,但由于我们通常会在页面里进行数据的请求以至于还是会刷新页面,并且由于 umi 隐藏了路由。因此这里对官方的例子做了改动,可以在导出时用高阶函数进行包裹返回新的组件。

import KeepAlive from 'react-activation'
class A extends Compontent{
  ...
}
export default props=>(
  <>
    <KeepAlive>
      <A {...props} />
    </KeepAlive>
  </>
)

1
2
3
4
5
6
7
8
9
10
11

# 5. 缓存控制

结合 umi 思路,可以在导航或者标签跳转时使用下方 clear 方法清空缓存中的 KeepAlive,之后可以结合 umi 插件能力来简化步骤。

①. 给需要控制缓存的 <KeepAlive /> 标签增加 name 属性

②. 使用 withAliveScope 或 useAliveController 获取控制函数

drop(name):

按 name 卸载缓存状态下的 <KeepAlive> 节点，name 可选类型为 String 或 RegExp，注意，仅卸载命中 <KeepAlive> 的第一层内容，不会卸载 <KeepAlive> 中嵌套的、未命中的 <KeepAlive>
dropScope(name)

按 name 卸载缓存状态下的 <KeepAlive> 节点，name 可选类型为 String 或 RegExp，将卸载命中 <KeepAlive> 的所有内容，包括 <KeepAlive> 中嵌套的所有 <KeepAlive>
clear()

将清空所有缓存中的 KeepAlive
- getCachingNodes()
  
  获取所有缓存中的节点

...
import KeepAlive, { withAliveScope, useAliveController } from 'react-activation'
...
<KeepAlive name="Test">
  ...
    <KeepAlive>
      ...
        <KeepAlive>
          ...
        </KeepAlive>
      ...
    </KeepAlive>
  ...
</KeepAlive>
...
function App() {
  const { drop, dropScope, clear, getCachingNodes } = useAliveController()

  useEffect(() => {
    drop('Test')
    // or
    drop(/Test/)
    // or
    dropScope('Test')

    clear()
  })

  return (
    ...
  )
}
// or
@withAliveScope
class App extends Component {
  render() {
    const { drop, dropScope, clear, getCachingNodes } = this.props

    return (
      ...
    )
  }
}
...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

插件以及参考资料来自https://github.com/CJY0208/react-activation更多使用方法可以进入查看本文只做自己使用部分的内容总结和归纳

Milk Hall

Choose mode