JavaScript事件监听器内存泄漏

Question

我正在使用React，Redux和Three.js开发WebGL应用程序。我的应用程序使用鼠标移动和点击作为输入。现在由于某种原因，每当我点击或移动鼠标时，我的应用程序变得越来越慢。如下面的性能配置文件所示，似乎存在某种内存泄漏，导致事件监听器使用的内存不断增长。

据我了解，屏幕截图中的黄线表示事件监听器的内存使用量不断增长。

但这条黄线究竟代表什么？它是事件监听器使用的内存量吗？或者注册听众的数量？或者注册/未处理事件的数量？

过去是否有人遇到类似的问题，可能会找到解决方案？

我的应用程序/原型的完整代码可以在this repository中找到。不幸的是，我还没有能够找出问题的原因或者在一个简单的代码片段中重现它。

Answer 1

这实际上可能是Dev唯一的问题。如果使用NODE_ENV=production构建react项目，则此问题可能不会持续存在。

这似乎与在https://github.com/facebook/react/issues/12141

上的未决问题有关

Answer 2

我已快速查看了您的代码，我的猜测是您将=>函数传递给将该函数添加为侦听器的函数，然后尝试将其删除（here ， 例如）。您无法删除=>侦听器，因为每次调用render方法时都会创建一个新函数（因此调用某个地方.removeEventListener(myArrowFunction)将尝试将该函数与已添加的函数匹配，但他们并不相等。

无论如何，不​​要使用箭头功能作为听众。

编辑：嗯，是的，使用箭头函数但声明为实例方法。或者存储为常量。不是关闭。