Dla wartości 'a' nie zostanie przerenderowany ListItem
, ponieważ nic się nie zmieniło dla pierwszego indexu. Pozostałe 3 ListItem
'y mają nowe propsy i React zdecydował, że należy przerenderować te komponenty.
To nie tak, Dla wartości ['a', 'x','y'] będzie componentDidUpdate
. A dla wartości 'z', będzie componentDidMount
.
Dzięki za odp. To teraz rozwinięcie :D
Mamy poniżej dokładnie to samo, ale w <ListItem key={text} text={text}
mamy teraz tak, czyli dla key
nie ma już index
jest tylko text
. Prawidłowa odpowiedź to 1. Nie wiem dlaczego zmiana w obiekcie key
na text
powoduje brak rerenderingu pierwszych 3 wartości.
Tak jak napisał Fuffu:
W drugim są zupełnie nowe klucze: x, y, z
i dla nich jest to pierwszy render więc componentDidUpdate
dla nich nie zostanie uruchomiony. Wygląda na to, że z jakiegoś powodu React uznał, że musi przerenderować a
.
Podsumowując wygląda na to, że jak komponent dostanie nowe propsy to się wykona componentDidUpdate
i nie ważne, że są to propsy takie same, jakie otrzymał przy ostatnim renderze.
Jeżeli zmienimy key, to się wykona componentDidMount
tak jak byśmy renderowali zupełnie nowy komponent.
EDIT: Sprawdźcie sami: https://jscomplete.com/playground/s263267