It is a myth and misunderstanding the key={...} make the display correct
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 35/100
- Tipo di issue
- Documentazione
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Stack tecnologico
- javascript, react
- Ambito
- documentation
Direzione di ricerca
Inizia leggendo la pagina Rendering Lists all’indirizzo https://react.dev/learn/rendering-lists, comprese le sezioni citate sulle chiavi e sugli indici degli array. Verifica le affermazioni rispetto al comportamento documentato di React e determina se la formulazione necessita di chiarimenti; il lavoro è completato quando su quella pagina è riportata una spiegazione concordata e tecnicamente accurata.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
On page https://react.dev/learn/rendering-lists
it is said that:
A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree.
That's a myth that the key keeps the updates correct. It helps to make the update faster, so that it goes by row level diff'ing, instead of cell level diff'ing.
For example, if you have a table with 5 fields. They key can make it so that the diff'ing happens with the prev row, so that it is faster.
Imagine if row 23 supposedly needed to compare with row 24, due to row added or deleted, but due to the key being bad, it is compared to row 23, and all the fields are different, so React needs to update it cell by cell.
If the key is good, however, now row 23 will be compared with row 24, and nothing changes, and no update is needed whatsoever.
You can check with an advanced engineer about this. The myth about "you need a good key so that the displayed data is correct", is wrong.
Maybe the original line "make the correct updates to the DOM tree" doesn't suggest that, but it can make readers think this way. So you may want to rephrase it or further explain it.
So this part later in the page:
You might be tempted to use an item’s index in the array as its key. In fact, that’s what React will use if you don’t specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.
is also a wrong concept. It will NOT lead to subtle and confusing bugs. It will just make it slow, but the display will still all be correct.
- Lingua principale
- JavaScript
- Stelle
- 11.8k
- Fork
- 7.9k
- Merge medio
- 16h 6m
- PR unite (30g)
- 7
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di reactjs/react.dev
-
type: documentation
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 82/100
-
bug: unconfirmed
Difficoltà 2/5 1-3 ore Idoneità per principianti 74/100
-
type: typos
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 90/100
-
bug: unconfirmed
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100