React＆amp;中的事件监听器内存泄漏终极版

Question

我正在尝试使用React和Redux来构建基于WebGL / Three.js的游戏。

到目前为止，我已经创建了一个简单的玩具应用程序来弄清楚如何处理输入，渲染，状态管理等。请参阅this repository。

只要没有触发任何事件，事情就会顺利运行。但是，出于某种原因，只要mousemove之类的事件被触发，内存使用率就会不断上升，性能会下降。

表现档案中的黄线显示事件不断堆积。

不幸的是，此时我的应用程序对于JSFiddle或类似的东西来说有点过于复杂。如果它有用，我可以在firebase上传应用程序。

但是也许某人之前已经看过这样的事情，并且知道究竟是什么导致了这种内存泄漏。

编辑：我尝试使用addEventListener()代替React的合成事件，事件监听器实际上已停止堆积um。但这是一个非常丑陋的解决方法而且并不令人满意。

此外，我意识到我的应用程序因为另一个错误而使用了大量（超过600 MB）的内存。同时运行我的应用程序，开发服务器，VSCode和其他一些后台任务使我的笔记本电脑快速达到了它的极限。在修复bug之后，事件监听器仍然保持堆积，但一段时间之后被GC删除。所以也许在我的计算机内存工作时，内存阻止了GC这样做......

Answer 1

你不会碰巧使用React 16开发版，是吗？

我看到类似的内存泄漏模式，但我使用React + P5.js来做动画。我一个接一个地删除了所有组件，直到我没有任何监听器回调，但仍然存在内存泄漏。

我将原始代码放在codepen上，然后将其移到本地开发服务器上，此时我注意到了内存泄漏，因此用完了想法，我尝试在codepen上测试它，而且令人惊讶的是，泄漏消失了。

Codepen正在使用缩小的React 15.3.0，而我的本地开发人员正在使用16 dev build。我构建了一个生产版本，现在监听器计数是不变的。经过进一步的测试，我发现在开发模式下，监听器计数在达到2700个监听器之后达到峰值然后降回，因此React必须保持它以进行调试，然后GCing它。

我可以提供我的codepen，以便在需要时说明问题。