keep-alive简单功能实现

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

了解

用过Vue的都知道 vue本身自带 keepAlive 其属性 include exclude 配合vuex 轻松可以实现 tags的缓存 切换 功能，但是react暂时不支持keepalive，当然了react也有类似的包如react-keep-alive或者react-activation，但是这里我们可以自己封装一个简单的公共组件实现这个功能，当然了我们这里只实现了简单的缓存，没有生命周期及动态删除或单独删除等功能

插一嘴

现在说的是V5版本的，V6版本的在下方链接

这个是React-Route6的keepalive效果的链接

一.目标

路由切换时，组件只是隐藏，而不要销毁，以达到缓存的目的。

二.思路

在切换路由时，让页面不卸载，而是通过 display none 隐藏掉。这样，因为页面没有卸载，所以原来所有的操作都会被保存下来。 将来再返回该页面，只需要 display block 展示即可。这样，就可以恢复原来的内容了

三.背景知识

1. Switch之外的Route中如果设置了children属性，且值是函数，此时，这个函数一定会执行；

2. Switch之内的Route中如果设置了children属性，且值是函数，此时，它的path匹配优先级是最低的。

<Route path="/any-path" children={()=><div>child</div>}></Route>

四.keep-alive封装

import React from 'react'
import { Route, RouteChildrenProps, RouteProps } from 'react-router'
type Props = RouteProps
export default function KeepAlive ({ path, children, ...rest }: Props) {
  const child = (props: RouteChildrenProps) => {
    //console.log('child....', props)
    // const isMatch = props.location.pathname.startsWith(path as string)
    return (
      <div
        className="keep-alive"
        hidden={!props.match}
        style={{ overflow: 'hidden' }}>
        {children}
      </div>
    )
  }

  return <Route path={path} {...rest} children={child} />
}

相关信息如下：

• Props用于设置传递参数类型
  

• 参数path用于传递地址
  

• 参数children用于获取相应路由组件
  

• 参数...rest可获取到其他路由规则，如exact等，将其传递给该组件返回的Route标签
  

• RouteChildrenProps对应的的props可以用来获取当前组件的信息
  

• props.match判断是否为缓存组件，是则包含在该对象中，不是则为null
  

• 样式keep-alive用于设置组件显示和隐藏
  

• children用于设置路由优先级
  

• child用于储存组件信息
  

五.使用

对父级路由组件进行缓存

<KeepAlive path="/home" exact>
    <Home />
</KeepAlive>

注意：一级路由写的话，使用二级路由的话别忘了也要写

六.效果展示