在 React 单页应用中，路由切换并不会刷新页面但组件会经历完整的挂载与卸载过程，害，这让人hen头疼，你懂的。

咱就是说为了解决这个问题，咱得手写一个 KeepAlive 组件，不依赖第三方库，从零开始。

KeepAlive 组件就像一个状态保鲜盒，Neng让组件在隐藏时不卸载，保持原有状态， 显示时直接复用，说实话，这是一个hen棒的设计。

Counter组件内部有一个count状态，当我们切换tab时Counter组件会被卸载，状态丢失，这个那个，挺烦人的。

if{ setCache=>)}

为了解决这个问题，我们需要缓存组件的状态和实例，不对不对，应该是缓存组件的JSX元素。

我们需要创建一个缓存对象，用来存储组件的JSX元素，哈哈，hen简单吧。

const KeepAlive = => { const = useState; useEffect => { setCache return prev; return { ...prev, : children, }; }); }, ); return .map => )} </> );};

这个代码的核心作用是：创建一个被KeepAlive缓存的组件，后续在项目中使用这个组件，即可实现组件的缓存。

<Counter name="A" />本质是一个：ReactElement 对象，这是一个普通的JS对象，你懂的。

children 是ReactElement，ReactElement Ke以被缓存，只要 ReactElement 一直被 render，组件就不会卸载，KeepAlive 的本质是：结构稳定，样式切换

为什么百度不收录?因为内容质量不高，或者关键词优化不够好，或者网站结构不友好，你kan，是不是这样？

如何解决百度不收录的问题?提高内容质量，优化关键词，改善网站结构，这些dou是有效的方法，说实话，hen有用。

Object.entries.map=>)

只要 component 被渲染过一次就把它保存起来这样就Neng实现KeepAlive的效果了是不是hen简单？哈哈。

本次学习将结合react-activation库的实际应用,以及手写KeepAlive的过程,全面理解KeepAlive的工作机制.

本文将深入讲解如何手写一个keep-alive组件,并且结合代码示例讲解其实现原理、技巧和相关概念。 活跃ID是一个标识符,当它变化时,KeepAlive组件会根据新的活跃ID来geng新当前显示的组件,并将其状态缓存到Map中。