Commit ve çizim

Ç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.

Örnek çözümü göster

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;

Kendini test et

Aşamaları eşleştir

render

Hesaplama, duraklatılabilir
commit

DOM'a uygular
useEffect

Commit sonrası
useLayoutEffect

DOM çiziminden hemen sonra
Commit aşaması hangi özelliğe sahiptir?
- Duraklatılabilir
- Asenkron çalışır
- Yalnızca sunucuda çalışır
- Senkron ve bölünmez
Cevabı göster

Senkron ve bölünmez — Commit senkron ve bölünmezdir.

Boşluğu doldur: useEffect ne zaman çağrılır

// render ve commit bittikten sonra
____ çağrılır

Cevabı göster

// render ve commit bittikten sonra
useEffect çağrılır

Sıradaki ders: Özet - React iç yapıları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler