react-activation 实现页面保活记录

一、安装插件(可选)

1、react-activation (推荐)
npm install react-activation
2、umi-plugin-keep-alive

这个插件也是基于react-activation

npm install umi-plugin-keep-alive --save

使用:

import {
   
    KeepAlive } from 'umi'
const contentList = () => {
   
   
	return (
		<KeepAlive 
			name="/About" //可按照name卸载缓存状态下的 <KeepAlive> 节点
			saveScrollPosition="screen" //自动保存共享屏幕容器的滚动位置
			when={
   
   true} >  //true卸载时缓存,false卸载时不缓存
       		{
   
   /*要保存状态的组件*/}

		</KeepAlive>
	)
}

但我使用umi4搭建的项目,在安装该插件后,umi没有导出KeepAlive,无法使用,所以直接用的第一种

二、AliveScope的两种配置方式

保证AliveScope稳定

1、在src/app.ts 中配置

配置文档: https://umijs.org/docs/api/runtime-config

import React from 'react';
import {
   
    AliveScope } from 'react-activation';

// 修改交给 react-dom 渲染时的根组件, 在外层包裹AliveScope
export function rootContainer(container: any) {
   
   
  return React.createElement(AliveScope, null, container);
}

然后在需要的组件外层包裹KeepAlive

import KeepAlive from "react-activation";
function Test() {
   
   
	return (
	  <KeepAlive>
	    {
   
   /*页面组件*/}
	  </KeepAlive>
	);
}


// 如果有connect函数的可以如下写法:
const DataMine = connect(
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值