Brug af useLayoutEffect til målinger før animation

Nogle gange springer eller flimrer et element synligt ved den første gengivelse, før det falder på plads. Det sker som regel, når du måler eller flytter et element, efter at browseren allerede har gengivet det.

Brugeren ser den forkerte position i ét billede og derefter en pludselig rettelse, hvilket ser ødelagt ud.

useEffect kører, efter browseren har gengivet siden. Hvis du derfor aflæser en måling og opdaterer DOM'en inde i useEffect, har brugeren allerede set det ukorrigerede billede, før din ændring anvendes.

Ved visuel placering, der skal være usynlig for brugeren, er timing efter gengivelsen for sen.

useLayoutEffect kører synkront, efter at React har ændret DOM'en, men før browseren gengiver den. Enhver DOM-læsning eller -skrivning, du foretager dér, gennemføres, før brugeren ser et eneste billede.

Det gør den til det rigtige værktøj til målinger og placering, der skal se korrekte ud med det samme.

Inde i useLayoutEffect kan du aflæse et elements layout med ref.current.getBoundingClientRect() for at registrere dets position og størrelse, før du animerer.

Fordi dette kører før gengivelsen, kan du både måle og anvende en starttransformation uden et synligt blink.

FLIP står for First, Last, Invert, Play. Du registrerer elementets første position, lader det flytte sig til sin sidste position, inverterer derefter ved at anvende en transformation, der visuelt placerer det tilbage ved den første position, og afspiller til sidst animationen ved at fjerne transformationen, så det animeres til den sidste position.

Det gør det muligt at animere layoutændringer med kun den billige transform, selvom det faktiske layout sprang øjeblikkeligt.

De vigtige aflæsninger sker i useLayoutEffect: registrer det første rektangel før ændringen og det sidste rektangel efter ændringen, og beregn derefter forskellen. Når du gør dette før gengivelsen, er den inverterende transformation på plads, før noget bliver vist.

Forskellen mellem de to rektangler giver dig den præcise forskydning og skalering, der skal til for at invertere ændringen.

Du angiver den inverterende transformation synkront inde i useLayoutEffect og fjerner den derefter i det næste billede, så elementet animeres til sin naturlige placering. Ofte udløser du afspilningstrinnet med requestAnimationFrame.

Fordi inverteringen blev anvendt før gengivelsen, ser brugeren aldrig elementet på dets rå sidste position.

På serveren findes der ingen DOM, så React logger en advarsel om, at useLayoutEffect ikke gør noget under servergengivelse. Layout-effekter giver kun mening i browseren.

Denne advarsel viser, at effekten ikke kan køre et sted, hvor der ikke er noget at måle.

Hvis en komponent skal køre på serveren, kan du bruge useEffect sammen med requestAnimationFrame til at udføre målingen før den næste gengivelse eller kun bruge useLayoutEffect betinget i browseren.

Det undgår advarslen, samtidig med at du opnår timing tæt på før-gengivelsen for ikke-kritiske animationer.

En højdeanimation er et klassisk eksempel: Mål den sammenklappede og udfoldede højde i useLayoutEffect, og animer derefter mellem konkrete pixelværdier, så overgangen bliver jævn.

Fordi højden auto ikke kan animeres, kan du ved først at måle den faktiske højde lave en overgang til et konkret tal.

Brug som standard useEffect til det meste. Brug kun useLayoutEffect, når du aflæser layout og skal ændre DOM'en før gengivelsen for at undgå et synligt blink.

Overdreven brug kan skade ydeevnen, fordi den blokerer gengivelsen, indtil den er færdig.

Du har lært, at problemet med blink skyldes måling efter gengivelsen, at useLayoutEffect kører før gengivelsen, og hvordan FLIP-teknikken animerer layoutændringer med billige transformationer.

Du har også set SSR-advarslen og en fallback med useEffect plus requestAnimationFrame.