关于前端:React-Hooks中取消HTTP请求来避免内存泄漏

47次阅读

共计 1264 个字符,预计需要花费 4 分钟才能阅读完成。

大家好!????

明天,让咱们看一下在 React Hooks 中应用 fetchAbort Controller 勾销 Web 申请从而来防止内存泄露!????

当咱们用 Fetch 来治理数据时,有时咱们想勾销申请(例如,当咱们来到以后页面时,当咱们敞开模态框,…)。

在???? 上面的示例中,咱们要在切换路由的时候获取并展现数据。然而,咱们在获取数据结束之前就来到了路由 / 页面。

7p2coedr8hhtdltuzxu1

4uoij0o2qmdlppeykeln

咱们刚刚看到了一个 内存透露! 让咱们看看为什么会呈现这个谬误,以及它的具体含意。

❓为什么有内存透露?:咱们有一个执行异步 fetch(url) 工作的组件,而后更新该组件的状态来显示元素,然而 咱们在申请实现之前就卸载 (unmounted) 了该组件。因为已卸载组件的状态(例如 setUserssetState)被更新, 所以造成了此次 内存泄露

???? 让咱们应用新的 AbortController API!

Abort Controller 容许您订阅一个或多个 Web 申请,并具备勾销申请的能力。????

当初,咱们能够拜访controller.signal

“具备 read-only属性的 AbortController接口返回一个AbortSignal (https://developer.mozilla.org… 对象实例,该实例可用于依据须要与 DOM 申请通信 / 停止它。”来自 MDN(https://developer.mozilla.org…)

让咱们看看如何应用它????

最初,如果咱们想勾销以后申请,只需调用 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-hook… 上查看此演示。

能够在 https://github.com/hua1995116… 查看源码

干杯 ???? ???? ????

译文来自 https://dev.to/somedood/best-…

译者: 秋风的笔记(github/hua1995116)

最初

欢送关注公众号 「秋风的笔记」,次要记录日常中感觉有意思的工具以及分享开发实际,放弃深度和专一度。

也能够扫码加我微信好友,进交换群。

正文完
 0