React 内存泄漏：什么，为什么，以及如何清理它们！
React 内存泄漏：什么，为什么，以及如何清理它们！
介绍
所有 React 开发人员都应该优化他们的应用程序。计算机没有无限的资源，一些浏览器即使是打开几个标签也会消耗大量内存。如果您打开了 15 个选项卡，通常您将需要超过 8GB 的内存来支持该怪物浏览器。如果它们中的大多数都有内存泄漏，那么它真的会减慢您的计算机速度。对于 React 开发人员来说，如果没有正确完成或根本没有完成，优化可能会令人头疼。开发人员团队通常将优化作为最后一项任务。相信我，在经过一年的开发后重构代码以进行优化可能会让人头疼。内存泄漏会破坏您的项目并花费大量金钱和时间。 阅读本文以了解为什么以及如何清理内存泄漏。
什么是内存泄漏？
在开发 React 应用程序时，内存泄漏是一个常见的问题。在 React 中，内存泄漏是一种资源泄漏，当应用程序错误地管理内存分配时发生。不再需要的内存不会被释放以供其他进程使用。当对象存储在内存中但运行代码无法访问时，也可能发生内存泄漏。
一旦发生内存泄漏，您将在控制台日志中收到类似的错误：
警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。
为什么要清理内存泄漏？
在开发 React 应用程序时，内存泄漏是常见的问题。它会导致许多问题，包括：
- 通过减少可用内存量来影响项目的性能；
- 减慢申请速度；
- 随机刷新页面；
- 系统崩溃；
- 大量查询使数据库过载；
为什么你应该修复内存泄漏的一个例子：
假设您正在构建一个应用程序 反应 和 火力基地 用于数据库。您创建的网站与 Firebase 进行了很多交互。仅仅几个小时后，您就达到了当天的 50k 读取限制。您检查唯一的用户是您。这怎么可能？！现在您的网站已关闭，并且因为您没有清理内存泄漏而无法正常工作。
是什么导致内存泄漏？
当 React 应用程序创建在安装组件时进行的订阅并且在卸载这些组件时没有取消订阅时，就会出现内存泄漏。
这些订阅可能是：
- DOM 事件监听器；
- WebSocket 订阅；
- 对 API 的请求；
让我们看一个 不好的例子 没有内存泄漏清理的组件：
在上面的代码片段中，我们有一个简单的组件 汽车 安装后，它会请求获取汽车信息的数据列表，并将汽车列表状态的值设置为从 API 获取的值。
设想：
- 用户执行触发事件处理程序以从 API 获取数据的操作。
- 之后，用户单击一个链接，该链接导航到另一个页面。
- 即使用户不再在最后一页，也会从 API 检索数据并调用函数，从而更新现在不存在的 汽车清单 状态。
- 从长远来看，这会累积并吃掉您的 API 获取限制和用户的浏览器资源。
如何清理内存泄漏？
现代编程语言和框架具有清除不再需要的数据的技术。 React 也不例外。
基本上，我们需要在组件卸载时删除订阅。为此，有以下三种方法：
1. 使用布尔标志
useEffect 挂钩具有在卸载组件后执行某些操作的功能。我们只需创建变量 已安装 并创建一个 if 子句来检查是否应该获取数据。卸载组件后，不再获取数据。
2. 使用 AbortController
Javascript有 中止控制器 . AbortController 接口表示一个控制器对象，允许您在需要时中止一个或多个 Web 请求。
现在，当用户导航到新页面时，AbortController 会取消请求，并清理内存泄漏。
3. 使用 use-state-if-mounted Hook
有一个很棒的图书馆 使用状态，如果安装 .它的工作方式类似于 useState 挂钩，但它还会在更新状态之前检查该组件是否已挂载。
如何检测内存泄漏？
有一种方法可以在您从反应中得到错误之前检测内存泄漏。只需使用谷歌浏览器的开发者工具。去 内存选项卡 拿 堆快照 并在您采取行动之前和之后的时间之间进行比较。
结论
在这篇文章中，您发现：
- 什么是内存泄漏；
- 是什么导致内存泄漏；
- 为什么修复内存泄漏很重要；
- 如何通过三种方式修复这些内存泄漏；
- 如何检测那些内存泄漏；
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
