在 React 中实现 keep alive(可参与文末讨论哦)
什么是 keep alive
在 Vue 中,我们可以使用 keep-alive
包裹一个动态组件,从而「缓存」不活跃的实例,而不是直接销毁他们:
<keep-alive>
<component :is="view"></component>
</keep-alive>
这对于某些路由切换等场景非常好用,例如,如果我们需要实现一个列表页和详情页,但在用户从详情页返回列表的时候,我们不希望重新请求接口获取,也不希望重置列表的过滤、排序等条件,那这时就可以对列表页的组件用 keep-alive
包裹一下,这样,当路由切换时,Vue 会将这个组件“「失活」”并缓存起来,而不是直接卸载掉。
最简单的方案
而在 React 中,其实一直以来都没有官方的 keep alive 解决方案,大部分开发者可能都会直接使用 display: none
来将 DOM 隐藏:
<div style={shouldHide ? {display: 'none'} : {}}>
<Foo/>
</div>
但这种方案其实只是在“「视觉上」”将元素隐藏起来了,并没有真正的移除,那有没有可能把 DOM 树真的移除掉,同时又让组件不被销毁呢?
Portals
❝Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。 ❞
这是 React 官方文档[1]上对 Portal 特性的介绍,值得注意的是,这里只是说“父组件以外的 DOM 节点”,但没有要求这个 DOM 节点是真的在页面上,还是「只是存在于内存中」。因此,我们可以先通过 document.createElement
在内存中创建一个元素,然后再通过 React.createPoral
把 React 子节点渲染到这个元素上,这样就实现了“空渲染”。
const targetElement = document.createElement('div')
ReactDOM.createPortal(child, targetElement)
基于这种方案,我们可以进一步封装出一个 Conditional
组件,从而实现通用性的条件渲染逻辑:
export const Conditional = props => {
const [targetElement] = useState(() => document.createElement('div'))
const containerRef = useRef()
useLayoutEffect(() => {
if (props.active) {
containerRef.current.appendChild(targetElement)
} else {
try {
containerRef.current.removeChild(targetElement)
} catch (e) {}
}
}, [props.active])
return (
<>
<div ref={containerRef} />
{ReactDOM.createPortal(props.children, targetElement)}
</>
)
}
首先,我们创建了一个 targetElement
,并且通过 createPortal
将 children
渲染到 targetElement
。然后,我们会创建一个容器 div
元素,并且通过 containerRef
拿到它的引用。最后,当 active
为 true
时,我们会把 targetElement
手动添加到 containerRef.current
的内部,反之,则会从其内部移除掉 targetElement
。实际使用的方式如下:
<Conditional active={!shouldHide}>
<Foo/>
</Conditional>
懒加载
细心的读者可能会发现,目前我们的 Conditional
组件还有一点小小的瑕疵:当组件初次渲染时,不论当前的 active
是 true
还是 false
, Conditional
组件都会将 props.children
渲染。这对大型应用可能会带来非常明显的性能问题,所以,我们可以为其增加“「懒加载」”的特性:
export const Conditional = props => {
const [targetElement] = useState(() => document.createElement('div'))
const containerRef = useRef()
// 增加一个 ref 记录组件是否“被激活过”
const activatedRef = useRef(false)
activatedRef.current = activatedRef.current || props.active
useLayoutEffect(() => {
if (props.active) {
containerRef.current.appendChild(targetElement)
} else {
try {
containerRef.current.removeChild(targetElement)
} catch (e) {}
}
}, [props.active])
return (
<>
<div ref={containerRef} />
{activatedRef.current && ( // 如果“被激活过”,才渲染 children
ReactDOM.createPortal(props.children, targetElement)
)}
</>
)
}
一些遗憾
不得不承认的是,基于 Portal 方案的 Conditional
组件并不能包治百病,和 Vue 的 keep-alive
相比,也存在不少缺憾:
- 需要手动控制
active
,不能直接基于子组件销毁/创建的生命周期事件 - 缺少失活/激活的生命周期时间,子组件无法感知自己是不是被缓存起来了
- 依赖了
ReactDOM
,对 SSR 不够友好
Reference
[1]
官方文档: https://link.zhihu.com/?target=https%3A//zh-hans.reactjs.org/docs/portals.html
- .NET Core采用的全新配置系统[4]: “Options模式”下各种类型的Options对象是如何绑定的?
- js运算符优先级笔记
- 通过协同绘制用GAN合成高分辨率无尽道路
- ASP.NET MVC的Model元数据与Model模板:预定义模板
- 为您的组织选择正确的企业云解决方案
- 搞定这些疑难杂症,向css3动画说yes
- 前十一个网络游戏业务收入1341亿 同比增22.1%
- ASP.NET MVC Model元数据及其定制:一个重要的接口IMetadataAware
- 使用Docker 1.12.x构建多容器Web应用程序
- 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
- 深度解剖dubbo源码
- .NET Core采用的全新配置系统[6]: 深入了解三种针对文件(JSON、XML与INI)的配置源
- 基于 vue2 构建和后台真实交互的 管理系统
- ASP.NET MVC的Model元数据与Model模板:模板的获取与执行策略
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 常用方法(文件夹操作)
- 常用方法(文件名操作)
- 构建File对象
- 两个常用静态变量
- Spring MVC 整合 Servlet 3.0
- 初探 SpringBoot 自动装配
- 报错405:HTTP method GET is not supported by this URL
- 思科模拟器:网络安全实验
- Django入门:基于 Django 的 Web 页面开发
- 从零开始重新认识 Spring Framework
- 思科模拟器:高级交换实验
- ElasticSearch 基本的查询命令+集成 SpringBoot
- 数据库能力测试:SQL 语句改错
- IDEA 导入并运行 Eclipse 的 JavaWeb 项目
- 使用思科模拟器 Cisco Packet Tracer 模拟交换机基本配置