Reactチュートリアルをやっていってみるその15
これは
Reactチュートリアルをやっていく記事です。
参考
タイムトラベル機能の追加
key を選ぶ
Reactではリストをレンダーする際に項目についてそれぞれある情報を保持します。
Reactはリストのどのアイテムが変更になったかを知る必要があり、アイテムに対しては
削除、追加、並び替えといったようにいくつかの可能性があります。
これら変更があった情報を保持しておくためにkeyプロパティを与える必要があります。
Reactは前回リストと比較してなかったものがあればコンポーネントを作成し、
前回あったものがなかった場合はコンポーネントを削除してstateを保持することが可能。
keyに変化があればstateを破棄して新しいstateを作成します。
keyやrefはReactの予約語になります。
動的なリストを構築する場合は正しいkeyを割り当てることが重要であり、推奨されている。
keyが指定されてなかった場合はReactは警告を表示して、デフォルトでkeyとしてインデックスを使用する。
昨日の出力結果にwarningが出ていたのはこのためです。
明日はkeyを意識しつつ、タイムトラベルの実装をやっていきます。
今日はここまで。
