React Hooks中这样写HTTP请求可以避免内存泄漏
译文来自 https://dev.to/somedood/best-practices-for-es2017-asynchronous-functions-async-await-39ji 原作者 Victor de la Fouchardière 译者: 蓝色的秋风(github/hua1995116)
大家好 !?
今天,让我们看一下在 React Hooks 中使用 fetch
和Abort Controller
取消Web请求从而来避免内存泄露!?
当我们用 Fetch 来管理数据时,有时我们想取消请求(例如,当我们离开当前页面时,当我们关闭模态框,...)。
在?下面的示例中,我们要在切换路由的时候获取并展示数据。但是,我们在获取数据完毕之前就离开了路由/页面。
我们刚刚看到了一个内存泄漏!让我们看看为什么会出现这个错误,以及它的具体含义。
❓为什么有内存泄漏?:我们有一个执行异步fetch(url)
任务的组件,然后更新该组件的状态来显示元素,但是我们在请求完成之前就卸载(unmounted)了该组件。由于已卸载组件的状态(例如 setUsers
,setState
)被更新, 所以造成了此次内存泄露。
?让我们使用新的 AbortController API!
Abort Controller 允许您订阅一个或多个Web请求,并具有取消请求的能力。?
现在,我们可以访问controller.signal
。
“ 具有
read-only
属性的AbortController
接口返回一个AbortSignal
(https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) 对象实例,该实例可用于根据需要与DOM请求通信/中止它。” 来自MDN(https://developer.mozilla.org/en-US/docs/Web/API/AbortController)
让我们看看如何使用它?
最后,如果我们想取消当前请求,只需调用abort()
。另外,你可以获取controller.signal.aborted
,它是一个只读属性,它返回一个?Boolean
表示与DOM通讯的信号是(true
)否(false
)已被放弃。
❗️注意:调用
abort()
时,fetch()
promise 会以名为AbortError 的 DOMException reject。
是的,你刚刚学习了如何取消Web请求!?
?让我们用React Hooks做到这一点!
❌改造之前
下面是一个组件示例,它请求数据并展示它们。
如果我们离开页面的速度太快而导致请求未完成:MEMORY LEAK
✅ 改造之后
我们使用 useEffect
来订阅我们的 fetch
请求来避免内存泄漏。当组件卸载(unmounted)时,我们使用useEffect
的清理方法来调用abort()
。
现在,不再有内存泄漏!?
你可以在 https://abort-with-react-hooks.vercel.app/ 上查看此演示。
可以在 https://github.com/hua1995116/node-demo/react-abort 查看源码
干杯 ? ? ?
❤️ 看完两件小事
如果你觉得这篇内容对你挺有启发,我想邀请你帮我两个小忙:
1.点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 )
2.欢迎关注公众号 「秋风的笔记」,主要记录日常中觉得有意思的工具以及分享开发实践,保持深度和专注度。
你的「点赞在看分享」是对作者最大的支持❤️
- Java实现解析IP地址的方法,给出一串数字,生成正确的IP地址
- 图解“管道过滤器模式”应用实例:SOD框架的命令执行管道
- No.013 Roman to Integer
- OData – the best way to REST–实例讲解ASP.NET WebAPI OData (V4) Service & Client
- Java实现的手工做乘法方法,给出二个字符串数字,返回相乘结果
- No.012 Integer to Roman
- 黑帽SEO剖析之手法篇
- IOS学习1——IOS应用程序的生命周期及基本架构
- 浅议“全局变量”、“多线程”和“编译器陷阱”
- Java实现的图片合并方法,支持水平和垂直合并
- OC学习15——文件I/O体系
- 用惯了ORM,居然不会写分页SQL了
- OC学习14——谓词
- 如何在32位系统中使用ROP+Return-to-dl来绕过ASLR+DEP
- 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 数组属性和方法