React 组件状态内存泄漏答案

【问题标题】：React component state memory leakReact 组件状态内存泄漏
【发布时间】：2017-10-24 07:44:20
【问题描述】：

当组件被卸载时，我的 React 组件中的状态没有被垃圾收集，导致内存泄漏。我在 macOS Sierra 上的 Chrome 10.12.5 上使用 react@15.5.4。

我在componentDidMount 中设置一个状态，比如this。

为了确认内存泄漏，我在componentDidMount 中添加了以下内容：

let arr = new Uint8Array(1024 * 1024 * 30);
this.setState({
  test: arr
});

并拍摄堆快照以确认在堆上分配了 30MB 的 Uint8Array。

然后，我确认该组件已被console.log 在componentWillUnmount 中卸载。

当我之后拍摄堆快照时，即使在允许足够的时间进行垃圾回收之后，Uint8Array 仍保留在堆中。

关于从哪里开始调试此问题的任何想法？或者从源代码中的任何观察？

【问题讨论】：

可能是表示组件及其状态的实际 JS 对象没有被删除，即使组件已从 DOM 中删除。也许 React 会缓存它以供以后重用？可能值得用 React 提出一个错误。
我在github link you posted 中看到您正在调用window.addEventListener 。您是否还删除了该事件侦听器？ That could cause memory leaks.我只是看了你的问题，如果我完全不在那儿，我很抱歉。
@RicoKahler 我是removing that listener。我认为这是一个单独的问题，因为手头的问题是状态对象没有被垃圾收集。

【解决方案1】：

据我了解，您期望 componentWillUnmount 用作类析构函数，但我认为 React 组件生命周期以不同的方式工作。

对象的状态等属性通常在类构造函数中初始化，然后componentWillMount/componentDidMount 和componentWillUnmount 只适用于同一个对象。

如果组件不再在 DOM 中并不意味着它会被垃圾回收。当（如果）您重新挂载它时，将使用相同的对象。

如果对您有意义，您可能可以在 componentWillUnmount 中清空 state 自己。在这种情况下，我认为 GC 会恢复内存。

【讨论】：