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

本文主要是介绍react-activation实现缓存，且部分页面刷新缓存，清除缓存，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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() 获取所有缓存中的节点

这篇关于react-activation实现缓存，且部分页面刷新缓存，清除缓存的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---