如何自己手写一个 keep-alive 组件

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。

如何自己手写一个 keep-alive 组件

用过 vue 的小伙伴们，应该知道，在 vue 中有一个自带的组件，叫做 keep-alive 的组件。 那么你知道 keep-alive 组件有啥用吗？ 在日常开发过程中，我们一般都是组件化开发。既然是组件化开发，那么必不可少的就是组件之间的切换。在 vue 中有一个动态组件的概念，他可以帮助开发者更好的实现组件之间的切换。但是在实例开发中面对需求的比较频繁，就会频繁的切换组件，而组件切换时，组件的实例都是重新创建销毁的。但是有时候，我们需要保存组件的一些状态。这个时候需要把组件缓存起来，就可以使用 keep-alive。 那你知道 keep-alive 的实现原理是什么吗？

他的实现原理基本是这样的： 在切换组价的时候，我们就不让组件销毁，然后是通过 display：none 来控制组件的显示隐藏。这样组件就不会再销毁，然后就可以实现组件缓存的效果。

那么接下来就让我们来实操一下吧。 可以封装一个组件函数，来实现具体的功能。

import React from 'react'
import { Route, RouteChildrenProps, RouteProps } from 'react-router'
type Props = RouteProps
// 这里的 第三个参数，是把剩余参数都存在 res 一个对象里面
export default function KeepAlive ({ path, children, ...rest }: Props) {
  const child = (props: RouteChildrenProps) => {
    console.log('child....', props)
    return (
      <div
        className="keep-alive"
        style={{ display: props.match ? 'block' : 'none' }}>
        {children}
      </div>
    )
  }

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

使用的话，就可以这样：

<KeepAlive path="/home">
    <Layout />
</KeepAlive>