問題タブ [unmount]

これは、私が以前に提起した質問のより簡潔なバージョンです。うまくいけば、それはよりよく説明され、より理解しやすくなります。

これは、数字を期待する 3 つの入力を持つ小さなアプリです (数字以外も入力で​​きることは無視してください。それは重要ではありません)。表示されているすべての数値の合計を計算します。入力の 1 つを別の数値に変更すると、合計が更新されます。

そのコードは次のとおりです。

そして、これは起動時と 2 番目の入力を 2 から 4 に変更した後のコンソール出力です。

ご覧のとおり、単一の入力が更新されると、すべての子は再レンダリングされず、最初にアンマウントされてから再マウントされます。すべての入力はすでに正しい状態にあり、更新する必要があるのは合計だけです。そして、それらの入力が何百もあると想像してみてください。

再レンダリングだけの問題であれば、メモ化を見ることができます。callbackしかし、変更されたために正確に更新されるため、それは機能しませんitems。いいえ、私の質問はすべての子のアンマウントについてです。

質問 1 : アンマウントを回避できますか?

Kent C. Dodds によるこの記事を信頼する場合、答えは単純にノーです (強調は私のものです)。

React の key prop を使用すると、コンポーネント インスタンスを制御できます。React がコンポーネントをレンダリングするたびに、関数を呼び出して、DOM の更新に使用する新しい React 要素を取得します。同じ要素タイプを返す場合、すべての* props が変更されたとしても、それらのコンポーネント/DOM ノードは保持されます。

(...)

これに対する例外は、 key propです。これにより、まったく同じ要素タイプを返すことができますが、React は以前のインスタンスを強制的にアンマウントし、新しいインスタンスをマウントします。これは、その時点でコンポーネントに存在していたすべての状態が完全に削除され、コンポーネントがすべての意図と目的のために「再初期化」されることを意味します。

質問 2 : その場合、各入力コンポーネントで非同期処理が発生するため、実際のアプリで不要と思われる問題を回避するには、どのような設計を検討する必要がありますか?