Commit ve çizim
- React kursu
- Uzman seviye
- Ders 19/32
- 4 dk
Çizim ve commit aşamalarını ayırt etmeyi öğrenirsin.
Commit ve çizim
React çizimi iki aşamada yapar: render (hesaplama) ve commit (uygulama). Render aşamasında fiber ağacı işlenir ve yan etkiler hesaplanır; bu aşama duraklatılabilir.
Commit aşamasında yan etkiler DOM'a uygulanır; bu aşama duraklatılamaz. commitWork fonksiyonu fiber ağacını dolaşır ve değişiklikleri uygular.
Commit sonrası useEffect ve useLayoutEffect çağrılır.
Commit aşaması detayı
Commit aşaması üç adımdan oluşur: DOM düğümleri eklenir/çıkarılır/güncellenir, ref'ler bağlanır ve useLayoutEffect çağrılır.
Bu adımlar senkron ve bölünmezdir; kullanıcı ara sıra çizim görmez. Commit bittikten sonra tarayıcı ekranı boyar.
useEffect ise boyadan sonra asenkron çağrılır; bu yüzden ekranı bloklamaz.
Uygulama commitWork fonksiyonunu yaz
commitWork fonksiyonu yaz. fiber parametresi alsın. if (fiber.effectTag === 'update') ile fiber.dom.textContent = fiber.props.text. if (fiber.child) commitWork(fiber.child) ve if (fiber.sibling) commitWork(fiber.sibling). Dışa aktar.
Başlangıç kodu
// commitWork fonksiyonunu buraya yazÖrnek çözüm
function commitWork(fiber) {
if (fiber.effectTag === 'update') {
fiber.dom.textContent = fiber.props.text;
}
if (fiber.child) commitWork(fiber.child);
if (fiber.sibling) commitWork(fiber.sibling);
}
export default commitWork;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşamaları eşleştir
| Kavram | Anlamı |
|---|---|
render |
Hesaplama, duraklatılabilir |
commit |
DOM'a uygular |
useEffect |
Commit sonrası |
useLayoutEffect |
DOM çiziminden hemen sonra |
2 Commit aşaması hangi özelliğe sahiptir?
- Duraklatılabilir
- Asenkron çalışır
- Yalnızca sunucuda çalışır
- Senkron ve bölünmez Doğru cevap
Açıklama: Commit senkron ve bölünmezdir.
3 Boşluğu doldur: useEffect ne zaman çağrılır
// render ve commit bittikten sonra
____ çağrılır// render ve commit bittikten sonra
useEffect çağrılırAçıklama: useEffect commit ve boyadan sonra çağrılır.