Reactガイドを読んでいくその84

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

差分検出処理

差分アルゴリズム

Keys

Reactはkey属性をサポートしている。
子要素がkeyを持っている場合Reactはkeyを利用して元のツリーの子要素と次のツリーの子要素を対応させる。
非効率的だった物をkeyを使うことで効率的に変換できるようになります。

配列の要素のインデックスを key として渡すことができます。
項目が並び替えられることがなければうまく動作するが、並び替えられると遅くなる。

keyとして配列のインデックスが使用されている場合、並べ替えはコンポーネントの状態に関しても問題を起こすことがある。
コンポーネントのインスタンスはkeyに基づいて更新され、再利用される。
インデックスがkeyの場合要素の移動はインデックスの変更を伴う。
その結果、非制御の入力などに対するコンポーネントの状態が混乱してしまい、予期しない更新がされてしまうことがある。

今日はここまで。