解决大型 React 应用程序中的内存泄漏

Question

最近一周我一直在互联网上搜寻，试图找出如何发现并解决我的 React 应用程序中的内存泄漏，因为我认为我的应用程序中存在内存泄漏。我注意到我们的应用程序最近崩溃的频率越来越高，并且我继续从 Node.js: 中收到相同的错误API fatal error handler returned after process out of memory。我知道我之前的其他人开发的应用程序有一些严重的缺陷，但从来不知道它们这么糟糕，所以我决定转向互联网来尝试解决这个问题。

我查看Chrome Dev Tools并拍摄堆快照，看看内存是否有所增加，在应用程序中进行一些操作后，当我看到内存从 123MB 增加到 200+MB 时，显然内存有所增加。现在，这是确定是否存在内存泄漏的好工具，但它绝对难以阅读和理解，这无助于我确定问题出在哪里。

现在我们的 AWS 实例大小只有 1GB，我看到的关于此类问题的很多答案都是增加 Node.js 的最大空间，但这并不能解决任何问题，相反，它只是在上面贴了一个创可贴。直到问题再次出现为止，我认为这不是一个好的做法。我现在来到这里，希望有人能帮助我理解我在使用时所看到的世界Chrome Dev Tools，和/或如果有人知道更好的方法来找出我的代码中的问题所在，那将是非常好的也有帮助。提前致谢。

编辑

在我在线阅读的 javascript 中内存泄漏的所有最常见问题中，在我们的应用程序中没有任何问题让我印象深刻，所以我很困惑可能的泄漏是否来自。

另一件事是应用程序从我们的后端获取大量数据并将其保存在内存中。最大限度地减少检索的数据量是否有帮助，或者这只会减缓问题而不是解决问题？

Answer 1

我的组织中的反应应用程序也遇到了同样的问题。React 应用程序从 Api 接收大量数据，并将数据存储在状态变量中。根据操作类型，应用程序会将大量数据发送回 Api。

因此，应用程序因Out of Memory问题而中断。问题的解决方案并不是直接的。然而，它涉及对代码的大量分析。

1. 尝试看看是否可以减少数据大小。
2. 深入研究是否可以在子组件中使用 useMemo，每次父组件重新渲染时，子组件都会重新渲染。
3. 如果需要修改应用程序中的一小部分状态，请尝试使用Immutability Helper和Immer

在我的应用程序中，我尝试在适用的情况下减小响应的大小，并使用 immer 来修改状态。Out of Memory更改后我在应用程序中没有看到问题。