Los siguientes códigos son para animar componentes.

1. Cada 3 segundos, cambio los estados listItem
2. AnimationText se volvió a renderizar, por lo que se produce la animación.

 const AnimationText = styled.div` /* ... */ animation: ${SlideUpAnimation} 750ms ease forwards; `; // this code works (success animate) const BestCocktailList = () => { const [listItem, setListItem] = useState<BestCocktail[]>(...); const [itemIdx, setItemIdx] = useState<{ old: number; new: number }>(...); useEffect(() => { // change state every 3 seconds setInterval(() => { setItemIdx((prev) => ({ old: prev.new, new: (prev.new + 1) % (listItem.length) })); }, 3000); // more codes.. }, [listItem]); return ( // ... <AnimationContainer> <AnimationText key={`o_${itemIdx.old}`}> {listItem[itemIdx.old].name} </AnimationText> <AnimationText key={`n_${itemIdx.new}`}> {listItem[itemIdx.new].name} </AnimationText> </AnimationContainer> ); }

Entendí por qué el código anterior funciona correctamente. React conoce la diferencia del árbol de elementos debido al cambio de accesorios clave.

Pero no puedo entender por qué los códigos a continuación no funcionan.

 // do not works (failed animate) const BestCocktailList = () => { // ... return ( // ... <AnimationContainer> <AnimationText> {listItem[itemIdx.old].name} </AnimationText> <AnimationText> {listItem[itemIdx.new].name} </AnimationText> </AnimationContainer> ); }

La diferencia es el uso de accesorios clave.

 // success <AnimationText key={some key}/> // fail <AnimationText/>

si no hay accesorios clave, React mira de arriba a abajo para encontrar diferencias (solo mi conocimiento). ¡Y creo que obviamente es un elemento diferente (como a continuación)!

 // before [ { type: 'div', props: { children: listItem[0].name }}, { type: 'div', props: { children: listItem[1].name }} ] // after [ { type: 'div', props: { children: listItem[1].name }}, { type: 'div', props: { children: listItem[2].name }} ]

Entonces, ¿por qué la animación no funciona?