Layoutin thrash-ilmiön ja visuaalisen välkkymisen välttäminen

Layout thrash tapahtuu, kun JavaScript vuorottelee DOM-ominaisuuksien lukemisen ja DOM:iin kirjoittamisen välillä silmukassa. Jokainen kirjoituksen jälkeinen luku pakottaa selaimen laskemaan layoutin synkronisesti uudelleen tarkan arvon palauttamiseksi. Tämä voi muuttaa yhden layout-laskennan kymmeniksi laskennoiksi ja heikentää suorituskykyä huomattavasti.

React niputtaa kaikki setState-kutsut tapahtumakäsittelijöiden ja efektien sisällä yhdeksi uudelleenrenderöinniksi. Tämä automaattinen niputus estää yhden renderöintisyklin sisäisen luku–kirjoitus–luku-mallin, joka aiheuttaa layout thrashin. React 18:ssa niputus ulottuu myös asynkronisiin takaisinsoittoihin ja Promise-olioihin, mikä vähentää samanaikaisten tilapäivitysten aiheuttamaa layout thrashia.

Välkyntää ilmenee, kun useEffect lukee DOM:n, päivittää tilaa, käynnistää uudelleenrenderöinnin ja selain piirtää näkymän kahdesti: kerran alkutilalla ja kerran korjatulla tilalla. Ensimmäinen piirtokerta näkyy hetken ennen kuin se korvautuu. Tämä näkyy selvimmin efekteissä, jotka muuttavat asettelun ominaisuuksia, kuten korkeutta, leveyttä tai sijaintia.

Avatkaa Chrome DevTools, siirtykää Rendering-välilehdelle (More tools -valikon kolmen pisteen valikon kautta) ja ottakaa käyttöön "Paint flashing". Uudelleenpiirrettävät alueet korostetaan vihreällä. Jos näette komponentin välähtävän ensimmäisellä renderöintikerralla ja piirtyvän heti uudelleen erilaiseen asetteluun, tämä vahvistaa, että useEffect-ohjattu tilapäivitys aiheuttaa kaksi piirtokertaa.

Siirtäkää DOM:n lukeminen ja siitä seuraavat tilapäivitykset useEffect-hookista useLayoutEffect-hookiin. Sama mittaus ja tilapäivitys tehdään nyt synkronisesti ennen piirtokertaa, React renderöi uudelleen ja tekee commitin saman käsittelyjakson aikana, ja selain piirtää vain lopullisen, oikean tilan. Vihreä välkyntä DevToolsissa katoaa.

Välkkymätön toimintamalli on seuraava: lukekaa DOM useLayoutEffect-hookissa, kutsukaa setState-funktiota mittaustuloksella, React renderöi uudelleen synkronisesti, tekee korjatun DOM:n commitin, ja selain piirtää näkymän kerran lopullisella tuloksella. Tämä on vakiintunut toimintamalli työkaluvihjeiden sijoitteluun, kiinnitettyjen otsakkeiden siirtymiin ja animaatioiden alustamiseen.

Valtaosa efekteistä kuuluu useEffect-hookiin: tietojen hakeminen (latauksen aikainen välähdys on hyväksyttävä ja odotettu), tapahtumien tai streamien tilaukset, lokitus ja analytiikka, ajastimet sekä kaikki efektit, jotka eivät vaikuta välittömästi näkyvään asetteluun. useLayoutEffect-hookin liiallinen käyttö tilanteissa, joissa useEffect riittäisi, on anti-pattern, joka heikentää suorituskykyä.

Varatkaa useLayoutEffect DOM-mittauksiin, jotka vaikuttavat visuaaliseen tulokseen: työkaluvihjeiden sijainteihin, elementin kokoon perustuvaan logiikkaan, vierityssijainnin palauttamiseen sekä animaatioiden alustamiseen, kun alustavat mitat luetaan. Selkeä merkki hookin vaihtamiseen on näkyvä yhden ruudun mittainen väärän asettelun välähdys ensimmäisellä renderöintikerralla.

Kahdella hookilla on identtiset allekirjoitukset: useLayoutEffect(callback, deps) ja useEffect(callback, deps). Ainoa ero on callback-funktion suoritusajankohta. Voitte vaihtaa hookien välillä muuttamalla koodissa yhden sanan. Aloittakaa useEffect-hookilla ja vaihtakaa useLayoutEffect-hookiin vain, jos varmistatte välkynnän esiintymisen.

On täysin sallittua ja tavallista käyttää molempia hookeja samassa komponentissa eri tarkoituksiin. Esimerkiksi kaaviokomponentti voi käyttää useLayoutEffect-hookia säilönsä leveyden mittaamiseen ja SVG:n viewBoxin synkroniseen asettamiseen ja käyttää sen jälkeen useEffect-hookia kaavion tietojen asynkroniseen hakemiseen. Kumpikin hook käsittelee tarkoitusta, jossa ajoituksella on merkitystä.

DevToolsin paint flashing -toiminnon lisäksi voitte laskea renderöintikerrat lisäämällä komponenttiin konsolilaskurin. Jos komponentti tulostaa "render" ensimmäisellä liittämiskerralla kaksi kertaa — kerran alkutilalla ja kerran korjatulla mittaustuloksella — kyseessä on kahden piirtokerran tilanne. Kun mittaus siirretään useLayoutEffect-hookiin, lokiin pitäisi liittämisen jälkeen tulla vain yksi renderöinti (Strict Moden aiheuttamaa kaksinkertaista suoritusta lukuun ottamatta).

Layout thrash syntyy, kun DOM:ia luetaan ja kirjoitetaan vuorotellen. Reactin batching estää suurimman osan siitä renderöintien aikana. Välkyntää ilmenee, kun useEffect mittaa DOM:n ja päivittää tilaa, mikä aiheuttaa kaksi piirtokertaa. Korjatkaa välkyntä siirtämällä DOM-mittaukset useLayoutEffect-hookiin. Käyttäkää oletuksena useEffect-hookia kaikkeen muuhun: tietojen hakemiseen, tilauksiin, lokitukseen ja ajastimiin.