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

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

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

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

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

import React from 'react'
import {
    Ro