共计 1264 个字符，预计需要花费 4 分钟才能阅读完成。
大家好！????
明天，让咱们看一下在 React Hooks 中应用 fetch 和 Abort Controller 勾销 Web 申请从而来防止内存泄露！????
当咱们用 Fetch 来治理数据时，有时咱们想勾销申请（例如，当咱们来到以后页面时，当咱们敞开模态框，…）。
在???? 上面的示例中，咱们要在切换路由的时候获取并展现数据。然而，咱们在获取数据结束之前就来到了路由 / 页面。
7p2coedr8hhtdltuzxu1
4uoij0o2qmdlppeykeln
咱们刚刚看到了一个 内存透露! 让咱们看看为什么会呈现这个谬误，以及它的具体含意。
❓为什么有内存透露？：咱们有一个执行异步 fetch(url) 工作的组件，而后更新该组件的状态来显示元素，然而 咱们在申请实现之前就卸载 (unmounted) 了该组件。因为已卸载组件的状态（例如 setUsers，setState）被更新, 所以造成了此次 内存泄露。
???? 让咱们应用新的 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)
最初
欢送关注公众号 「秋风的笔记」，次要记录日常中感觉有意思的工具以及分享开发实际，放弃深度和专一度。
也能够扫码加我微信好友，进交换群。