react-activation实现缓存，且部分页面刷新缓存，清除缓存

manda Liu

已于 2024-02-02 18:28:05 修改

阅读量3.5k

点赞数 6

文章标签： react.js 缓存前端

于 2024-02-02 18:27:37 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42398301/article/details/135998754

版权

本文介绍了如何在React应用中使用`react-activation`库进行依赖安装、AliveScope包裹根组件、组件和路由的缓存，以及keepAlive属性的使用方法，还提供了手动刷新和清除缓存的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装依赖

npm i -S react-activation

2.使用AliveScope 包裹根组件

import { AliveScope } from "react-activation"
<AliveScope>
   <Router>
       <Switch>
           <Route exact path="/" render={() => <Redirect to="/login" push />} />        
           <Route path="/login" component={Login} />
           <Route path="/aaaa" component={App} />
           <Route path="/404" component={NotFound} />
           <Route component={NotFound} />
       </Switch>
   </Router>
</AliveScope>

3.缓存组价或者路由

缓存组件

import { KeepAlive } from "react-activation"
export default () => {
  const [isShow, setIsShow] = useState(true)
  return <div>
    <button onClick={() => setIsShow(!isShow)}>切换</button>
    {
      isShow &&
      <KeepAlive>
        <Page3 />
      </KeepAlive>
    }
    <Page4 />
  </div>
}

缓存路由

import KeepAlive from 'react-activation'
//name属性，是为了刷新时候，判断路由
<KeepAlive name={this.props.path}>
	<Route  path={path} exact={exact}  strict={strict}  render={(props)=>( <Component {...props} /> )} />
</KeepAlive>

4.keepAlive属性

属性名	属性	备注
when	Boolean、Array、Function	Boolean (true-卸载时缓存 false-卸载时不缓存) Array (第 1 位参数表示是否需要在卸载时第 2 位参数表示是否卸载的所有缓存内容，包括中嵌的 ) Function (返回值为上述 Boolean 或 Array)
saveScrollPosition	Boolean	自动保存滚动位置（默认true）
name	string	缓存标识

5.在组件中手动刷新缓存，清除缓存

类组件

import { withAliveScope } from 'react-activation'

class roleSetting extends Component {
	//组件内容
	//在路由跳转之前，将要跳转的二级页面缓存清空，解决从列表页跳转详情时，只有第一次掉接口，其他情况均不掉接口问题
	this.props.refreshScope('bbb')
	this.props.history.push({ pathname: "bbb", state: state});
	
	//清除所有缓存
	this.props.clear();
}
export default withAliveScope(roleSetting )

函数组件

import { useAliveController } from 'react-activation'
const TeamList = (props) => {
	const { refreshScope, clear } = useAliveController()
	//在路由跳转之前，将要跳转的二级页面缓存清空，解决从列表页跳转详情时，只有第一次掉接口，其他情况均不掉接口问题
	refreshScope('aaa')
	props.history.push({
       pathname: 'aaa',
        state: state,
    });

	//清除所有缓存，比如退出登录时候
	clear();
}
export default TeamList

drop(name) 卸载缓存，不包括嵌套的KeepAlive
dropScope(name) 卸载缓存，包括嵌套的所有KeepAlive
refresh(name) 刷新缓存状态，不包括嵌套的KeepAlive
refreshScope(name) 刷新缓存状态，包括嵌套的所有KeepAlive
clear() 清空所有缓存
getCachingNodes() 获取所有缓存中的节点