Özet - React iç yapıları

Bir fiber düğümünü elle oluşturup diff mantığını anlatan bir örnek yazarsın.

Özet - React iç yapıları

Bu grupta reconciler'ı, fiber ağacını ve commit aşamasını öğrendin.

Reconciler iki ağacı diffing ile karşılaştırır; fiber düğümleri bağlantılı liste gibi gezilir ve çizim duraklatılabilir; commit aşaması senkron olarak DOM'a yazar.

Bu iç yapıları bilmek, performans sorunlarını anlamana yardımcı olur. Şimdi bir diff fonksiyonu yazacaksın.

Uygulama diffNodes fonksiyonunu yaz

diffNodes fonksiyonu yaz. oldNode ve newNode parametreleri alsın. if (!oldNode) ile return { action: 'add', node: newNode }. if (!newNode) ile return { action: 'remove' }. if (oldNode.type !== newNode.type) ile return { action: 'replace', node: newNode }. Son olarak return { action: 'update', node: newNode }. Dışa aktar.

Örnek çözümü göster

function diffNodes(oldNode, newNode) {
  if (!oldNode) return { action: 'add', node: newNode };
  if (!newNode) return { action: 'remove' };
  if (oldNode.type !== newNode.type) return { action: 'replace', node: newNode };
  return { action: 'update', node: newNode };
}
export default diffNodes;

Kendini test et

Aşağıdakilerden hangisi yanlış?
- Commit duraklatılabilir
- Fiber child ve sibling ile gezilir
- key liste eşleştirme yapar
- Reconciler diffing yapar
Cevabı göster

Commit duraklatılabilir — Commit senkron ve bölünmezdir, duraklatılamaz.

Boşluğu doldur: fiber kardeşe geç

if (fiber.child) commitWork(fiber.child);
if (fiber.____) commitWork(fiber.sibling);

Cevabı göster

if (fiber.child) commitWork(fiber.child);
if (fiber.sibling) commitWork(fiber.sibling);

Kavramları eşleştir

reconciler

İki ağacı karşılaştırır
fiber

İç veri yapısı
commit

DOM'a yazar
diffing

Farkları bulur

Sıradaki ders: Custom renderer nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler