React Keyとindex、props、State


KeyとIndex
リトラクトでアレイをレンダリングするときに、エレメントが変化したときにkeyを使用します.
keyやindexを置くことはできますが、indexを置く方法は好きではありません.
keyはreactが追加または削除するアイテムを決定するのに役立ちます.
パフォーマンスの面では、鍵の再ロードを防止できます.性能の面では、鍵をつけたほうがいいです.
indexを使用する場合

list.map((item, i) => (
 <ItemLi key={i}>{item}</li>
))
listは[1,2,3,4]配列を表す.
keyにindexが追加されたと仮定し、2番目の要素が削除されると、次の3,4も再ロードされます.
したがって、key値にindexではなくuniq値をkeyとして指定すると、reactは要素のみを識別して削除します.これが性能上の良い言い方です.
keyで入れるものがない場合はindexを最後の手段として用いることができる.
ただし、indexを配置する場合は、要素が変更されないことを確認し、画面に固定ビューとして表示されている場合にのみ使用します(追加、削除...など)
PropsとStateの違い
Props
propsは、親コンポーネントがサブコンポーネントに渡すデータです.
propsは変更できません.propsは継承素子内で変更できません.
State
Stateは素子の状態を表し、propsとは逆にすることができる.状態によって変化したり、直接変形したりすることができます.