React Keyとindex、props、State
KeyとIndex
リトラクトでアレイをレンダリングするときに、エレメントが変化したときにkeyを使用します.
keyやindexを置くことはできますが、indexを置く方法は好きではありません.
keyはreactが追加または削除するアイテムを決定するのに役立ちます.
パフォーマンスの面では、鍵の再ロードを防止できます.性能の面では、鍵をつけたほうがいいです.
indexを使用する場合
keyにindexが追加されたと仮定し、2番目の要素が削除されると、次の3,4も再ロードされます.
したがって、key値にindexではなくuniq値をkeyとして指定すると、reactは要素のみを識別して削除します.これが性能上の良い言い方です.
keyで入れるものがない場合はindexを最後の手段として用いることができる.
ただし、indexを配置する場合は、要素が変更されないことを確認し、画面に固定ビューとして表示されている場合にのみ使用します(追加、削除...など)
PropsとStateの違い
Props
propsは、親コンポーネントがサブコンポーネントに渡すデータです.
propsは変更できません.propsは継承素子内で変更できません.
State
Stateは素子の状態を表し、propsとは逆にすることができる.状態によって変化したり、直接変形したりすることができます.
リトラクトでアレイをレンダリングするときに、エレメントが変化したときに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とは逆にすることができる.状態によって変化したり、直接変形したりすることができます.
Reference
この問題について(React Keyとindex、props、State), 我々は、より多くの情報をここで見つけました https://velog.io/@jungjh123456/React-Key와-props그리고-Stateテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol