Renderöintivaihe ja DOM:n commit

Reactin työskentelysyklissä on kaksi päävaihetta: renderöintivaihe ja commit-vaihe. Renderöintivaiheen aikana React kutsuu komponenttifunktioita ja muodostaa käyttöliittymästä virtuaalisen esityksen (Fiber-puun). Commit-vaiheen aikana React toteuttaa Fiber-puussa olevat muutokset oikeassa DOM-puussa.

React 18 Concurrent Mode -tilassa renderöintivaihe voidaan keskeyttää, pysäyttää tai aloittaa uudelleen. React saattaa kutsua komponenttifunktiota useita kertoja ennen yhdenkään muutoksen viemistä käyttöön. Siksi komponenttifunktioiden on oltava puhtaita: niillä ei saa olla sivuvaikutuksia, koska funktio voi suorittua useammin kuin kerran yhtä näkyvää päivitystä kohti.

Toisin kuin renderöintivaihe, commit-vaihe on aina synkroninen ja suoritetaan loppuun asti. Reactia ei voi keskeyttää DOM-muutosten käyttöönoton aikana. Näin DOM ei koskaan jää osittain päivitettyyn tilaan. Käyttäjä näkee jokaisen commit-vaiheen jälkeen aina täysin yhtenäisen käyttöliittymän.

Commit-vaiheessa on kolme alavaihetta: ennen muutosta (luokkakomponentin getSnapshotBeforeUpdate suoritetaan tässä, jotta DOM-arvot voidaan lukea ennen muutoksia), muutos (React lisää, päivittää ja poistaa DOM-solmuja) ja asettelu (synkroniset efektit suoritetaan tässä, erityisesti useLayoutEffect sekä luokkakomponentin componentDidMount/componentDidUpdate).

useEffect on passiivinen efekti, mikä tarkoittaa, ettei sitä suoriteta commit-vaiheen aikana. Kun commit-vaihe on valmis ja selain on piirtänyt näkymän, React ajoittaa passiiviset efektit suoritettaviksi asynkronisesti. Ne suoritetaan sen jälkeen, kun selain on saanut tilaisuuden näyttää päivitetyn DOMin näytöllä.

useLayoutEffect suoritetaan) ja passiivisten efektien vaiheen (jossa useEffect suoritetaan) välissä. Tämä on olennainen ajoitusero: useLayoutEffect suoritetaan ennen piirtämistä ja useEffect sen jälkeen. Ero on erittäin tärkeä efekteille, jotka muuttavat visuaalista tulosta.

Jos useEffect lukee DOMia ja päivittää tilaa (esimerkiksi mittaa elementin ja asettaa koon tilamuuttujaan), React renderöi ja ottaa muutokset käyttöön uudelleen. Selain piirtää näkymän kahdesti: ensin alkuperäisellä koolla ja sitten korjatulla koolla. Käyttäjä saattaa nähdä hetken väärän koon, ennen kuin korjaus tulee näkyviin.

React rakentaa sisäisesti puun "fiber"-solmuja, yhden kutakin komponentti-instanssia kohden. Jokainen fiber sisältää komponentin tilan, efektit ja tulosteen. Renderöintivaiheen aikana React luo uuden työn alla olevan fiber-puun. Commit-vaiheen aikana työn alla olevasta puusta tulee nykyinen puu, ja vanha puu kierrätetään.

React Strict Mode kutsuu kehitystilassa tarkoituksella komponenttifunktioita ja efektejä kahdesti sivuvaikutusten havaitsemisen helpottamiseksi. Sekä useLayoutEffect että useEffect mountataan, unmountataan ja mountataan uudelleen. Tätä kaksoiskutsua ei tapahdu tuotannossa. Sen tarkoitus on tuoda esiin virheet, joissa efektien siivousta ei tehdä asianmukaisesti.

Koska renderöintivaihe voidaan keskeyttää ja suorittaa uudelleen, komponenttifunktioiden on tuotettava samoilla syötteillä sama tulos ilman sivuvaikutuksia. Funktion rungossa tehdyt mutaatiot, tilaukset ja API-kutsut (efektien ulkopuolella) suoritetaan Concurrent Modessa odotettua useammin, mikä johtaa virheisiin.

Älä koskaan lue DOM-ominaisuuksia suoraan komponenttifunktion rungossa. DOM ei ehkä vielä ole olemassa (palvelinrenderöinnissä), tai se voi olla vanhentunut (uudelleenrenderöinneissä). Lue DOM aina useLayoutEffect-efektin sisällä (ennen piirtämistä tehtäviä lukuja varten) tai useEffect-efektin sisällä (piirtämisen jälkeen tehtäviä lukuja varten), jolloin DOM:n ajantasaisuus on taattu.

Reactin renderöintivaihe rakentaa fiber-puun ja voidaan keskeyttää; commit-vaihe ottaa DOM-muutokset käyttöön ja on aina synkroninen. Commit-vaiheessa on kolme alavaihetta: ennen mutaatiota, mutaatio ja layout. useLayoutEffect suoritetaan layout-vaiheessa ennen selaimen piirtämistä. useEffect suoritetaan passiivisena efektinä piirtämisen jälkeen.