Ritheann an dá cheann éifeachtaí, ach ag amanna éagsúla i gcoibhneas le pheintéireachta an bhrabhsálaí — agus is é an difríochtaí ama sin an iomlán an pointe.
Ritheann an dá cheann éifeachtaí, ach ag amanna éagsúla i gcoibhneas le pheintéireachta an bhrabhsálaí — agus is é an difríochtaí ama sin an iomlán an pointe.
useEffect ritheann tar éis go bhfuil an brabhsálaí tar éis a pheintéireachta. Tá sé neamhsioncreonaiseach agus neamhbhacainneach. Úsáid é i bhformhór na n-úsáidí (sonraí, foscriptions, logáil).useLayoutEffect ritheann go sioncronach tar éis an DOM a athrú ach ROIMH an brabhsálaí a pheintéireachta. Úsáid é nuair a chaithfidh tú an leagan amach a léamh agus an DOM a athrú san fhráma chéanna chun soilsiú geal a sheachaint.render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
Samhlaigh eilimint a thomhas agus tooltip a athphoisiúnú bunaithe ar a méid. Le useEffect, fhéadfadh an úsáideoir an tooltip san áit dhrochmheasartha a fheiceáil ar feadh tamaill, ansin léimeann sé:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
Le useEffect, ritheann an cód céanna tar éis peintéireachta → soilsiú geal aon-fhráma.
useLayoutEffect a dhéanann an UI mothú janky, toisc nach féidir leis an brabhsálaí a pheintéireachta go dtí go gcríochnaíonn sé.Riail an ordóige: default go useEffect; ní úsáid ach useLayoutEffect maidir le tomhais/mutaidhní sioncronach DOM a bhéarfadh soilsiú geal ar shlí eile.