コンポーネントの状態のメモリリークが発生しました

Question

コンポーネントが取り外されたときにReactコンポーネントの状態がガベージコレクションされず、メモリリークが発生します。 macOS SierraでChrome 10.12.5でreact @ 15.5.4を使用しています。

のように状態をcomponentDidMountに設定しています。メモリリークを確認するために

、私は私のcomponentDidMountに以下を追加しました：

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

をし、ヒープに割り当てUint8Arrayの30メガバイトを確認するために、ヒープのスナップショットを取りました。

次に、コンポーネントがconsole.logでマウント解除されることを確認しました。componentWillUnmountです。

後でヒープスナップショットをとると、ガベージコレクションのための十分な時間が経過しても、Uint8Arrayがヒープに残ります。

この問題のデバッグを開始する場所についてのご意見はありますか？またはソースコードからの任意の観測？

Answer 1

私の理解では、componentWillUnmountはクラスデストラクタとして機能すると期待していますが、Reactコンポーネントライフサイクルは異なる方法で動作すると思います。

状態のようなオブジェクトのプロパティは、一般にクラスコンストラクタに含まれていますが、componentWillMount/componentDidMountとcomponentWillUnmountは同じオブジェクトで単純に機能します。

コンポーネントがDOMに存在しなくなっても、そのコンポーネントがガベージコレクションされているわけではありません。同じオブジェクトが再マウントされた場合に使用されます。

stateは、あなたにとって意味がある場合は、おそらくcomponentWillUnmountで空白にすることができます。この場合、GCはメモリを回復すると思います。