React.cloneElementメモリ効率

Question

はoriginalComponentのごみは収集されます。

const WrapperComponent = ({ originalComponent, ...props }) => { 
    const clone = React.cloneElement(originalComponent, props); 
    return <div>{clone}</div>; 
}; 

をそれとも、部品の重複につながるのでしょうか？

Answer 1

React.cloneElement()を使用するとメモリの非効率性はありません。オリジナルをベースとして新しいReact要素を作成します。すべてのオブジェクトと同様に、参照がどこかの変数の元の要素に保持されない限り、ガベージコレクションと削除が行われます。

これを確認するには、Chrome開発ツールのメモリスナップショットプロファイラを使用して簡単なテストを行いました。 WrapperComponentを使用して単一のコンポーネントをレンダリングすると、クローンされたコンポーネントのインスタンスが1つだけメモリに格納されます。