大量のメモリを消費するReact.jsアプリ（元の実装のほぼ2倍）
最近、重いページをReactに移植しました。私はhtmlをほとんど同じに保ちました。主な違いは、以前はサーバーでレンダリングされたhtmlがブラウザーに直接渡され、現在、react rewriteはサーバー側APIを介してjsonをプルし、Reactを使用してDOMを管理することです。
以前の実装のヒープスナップショットが最大55 MBになるのを見てきました。同じデータの場合、React.js実装のヒープスナップショットは約100+ MB（ほぼ2倍）になります
メモリに保持されているjsonデータが、消費されるメモリの増加に寄与することを理解しています。しかし、ヒープスナップショットを調べたところ、保持サイズの約60％は、保持パスにdeleteAllListeners> ....> unmountComponentAtNodeが含まれているオブジェクトが原因であることがわかりました。使用メモリを削減するという意味で、それが何を意味するのかを理解しようとしています。
また、ReactによってDOMに追加された "data-reactid"属性は、メモリ消費の無視できない増加に寄与する可能性がありますか？
この質問 役立つかもしれないいくつかの詳細があります。
Reactは仮想DOMと呼ばれるものを使用しています。基本的には、既存のブラウザDOMツリーに加えて、メモリ内に代替DOMツリーを構築しますが、効率的な更新を実行するには、最後に表示された仮想DOMツリーをメモリに保持する必要があるため、ブラウザDOMツリーに対して高速で効率的な更新を生成できます。
2番目の質問の詳細から、ユーザーがページを下にスクロールすると、基本的に新しいコンポーネントを（新しいコンポーネントを削除せずに）追加する無限スクロールがあることがわかりました。したがって、これがメモリ使用量の増加の原因となるはずです（以前のソリューションと比較して、メモリ内にデータ+仮想DOMがあるため）
それを修正する方法は、実際にユーザーに表示されるコンポーネントのみをレンダリングすることです。 react-list を使用するか、このために独自のコンポーネントを実装してみてください。