Özet - React iç yapıları
- React kursu
- Uzman seviye
- Ders 20/32
- 5 dk
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.
Başlangıç kodu
// diffNodes fonksiyonunu buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi yanlış?
- Commit duraklatılabilir Doğru cevap
- Fiber child ve sibling ile gezilir
- key liste eşleştirme yapar
- Reconciler diffing yapar
Açıklama: Commit senkron ve bölünmezdir, duraklatılamaz.
2 Boşluğu doldur: fiber kardeşe geç
if (fiber.child) commitWork(fiber.child);
if (fiber.____) commitWork(fiber.sibling);if (fiber.child) commitWork(fiber.child);
if (fiber.sibling) commitWork(fiber.sibling);Açıklama: sibling ile kardeş fiber işlenir.
3 Kavramları eşleştir
| Kavram | Anlamı |
|---|---|
reconciler |
İki ağacı karşılaştırır |
fiber |
İç veri yapısı |
commit |
DOM'a yazar |
diffing |
Farkları bulur |