![fd38f278f8548e8730ed51d17e4d96d5.png](https://i-blog.csdnimg.cn/blog_migrate/3ebcb800d0da9fce2c75d91054d00548.jpeg)
- 重写 组件,可参考 react-live-route重写可以实现我们想要的功能,但成本也比较高,需要注意对原始 功能的保存,以及多个 react-router 版本的兼容
- 重写路由库,可参考 react-keeper重写路由库成本是一般开发者无法承受的,且完全替换掉路由方案是一个风险较大的事情,需要较为慎重地考虑
- 基于 组件现有行为做拓展,可参考 react-router-cache-route在阅读了 的源码后发现,如果使用 component 或者 render 属性,都无法避免路由在不匹配时被卸载掉的命运但将 children 属性当作方法来使用,我们就有手动控制渲染的行为的可能,关键代码在此处github.com/ReactTraini…
基于上述源码探究,我们可以对 进行拓展,将 的不匹配行为由卸载调整为隐藏,如下
<Route exact path="/list">
{props => (<div style={props.match ? null : { display: 'none' }}><List {...props} />div>
)}Route>
上述是最简的调整方式,实际情况中也需要考虑隐藏状态下 match 为 null 导致组件报错的问题,且由于不再是组件卸载,所以和 TransitionGroup 配合得不好,导致转场动画难以实现
使用 react-router-cache-route,得到的效果大致如下图,
上述探究了通过路由入手实现自动状态保存的可能,以及现有的实现,但终究不是真实的、纯粹的 KeepAlive 功能,接下来我们尝试探究真实 KeepAlive 功能的实现
模拟真实的 功能以下是期望的使用方式
实现原理说起来较为简单,由于 React 会卸载掉处于固有组件层级内的组件,所以我们需要将 中的组件,也就是其 children 属性抽取出来,渲染到一个不会被卸载的组件 内,再使用 DOM 操作将 内的真实内容移入对应 ,就可以实现此功能
以下是 react-activation 的实现效果
在线示例(https://codesandbox.io/s/affectionate-beaver-solkt)
下图为 的实现原理说明
实际实现过程中,遇到了许多问题,都是由于打破了原有 React 层级关系引起的,例如
渲染延迟(react-activation 中已修复)
Context 上下文功能失效(react-activation 中已修复)
Error Boundaries 失效(react-activation 中已修复)
React.Suspense & React.lazy 失效
React 合成事件冒泡失效
其他未发现的功能
但上述问题,大多数是可以通过桥接机制修复的,具体可以参考此处 issues
相同的、更早的实现还有 react-keep-alive
结语状态缓存是应用中十分常见的需求,在需要处理的数据量较少时,使用手动状态缓存就可以解决大多数问题,但当情况复杂时,还需要尝试将缓存功能单独拎出来解决,以便在业务开发过程中更好地进行关注点分离
目前的实现都有各自的问题,但其探究过程十分有趣,最好的方式仍是官方的支持,但目前还不能报太大期望
作者:CJY0208
链接:https://juejin.im/post/5d7edee9f265da03a9506701
![0c0d5e6dc095a74f16541966bf0058ef.png](https://i-blog.csdnimg.cn/blog_migrate/bc190b2eb8e06957746d4e3b8a94d931.png)
看,官方出品了 Vue 编码风格指南!
设计模式之观察者模式
NodeJS创建HTTP、HTTPS服务器与客户端
一篇朴实的文章带你30分钟捋完TypeScript,方法是正反对比
如果觉得本文有帮助,欢迎多多转发点赞,推荐给更多的小伙伴哟
更多前端系统学习视频教程,点击这里获取哦:https://study.miaov.com/study好消息~好消息~即日起新注册的用户,可享受新人“VIP视频”礼包哦,注册后记得添加微信客服:miaov_xy 来获取哦