Fiber ağacı

Fiber düğümlerinin çizim birimi olduğunu öğrenirsin.

Fiber ağacı

Fiber, React 16+'da reconciler'ın iç veri yapısıdır. Her bileşen bir fiber düğümü olur; bu düğüm tipi, özellikleri, çocukları ve kardeşlerini taşır.

Fiber ağacı bağlantılı liste benzeri bir yapıdadır: child, sibling ve return işaretçileriyle gezilir. Bu, çizimin bölünebilmesini sağlar.

React bir fiberi işler, duraklatır, daha sonra kaldığı yerden devam eder. Bu concurrent rendering'in temelidir.

Fiber işleme

React, fiber ağacında derinlik öncelikli (depth-first) gezinir. Bir fiberi işler, önce çocuğa, sonra kardeşe geçer. Her adımda süreyi kontrol eder; süre dolduysa duraklar.

Duraklama, tarayıcının kullanıcı etkileşimine yanıt vermesine olanak tanır. React kaldığı fiberi kaydeder ve sonraki karede devam eder.

Bu mekanizma shouldYield fonksiyonu ile kontrol edilir.

Uygulama createFiber fonksiyonunu yaz

createFiber fonksiyonu yaz. type ve props parametreleri alsın. { type, props, child: null, sibling: null, return: null } döndür. Dışa aktar.

Örnek çözümü göster

function createFiber(type, props) {
  return {
    type,
    props,
    child: null,
    sibling: null,
    return: null,
  };
}
export default createFiber;

Kendini test et

Boşluğu doldur: fiber düğümü oluştur

function createFiber(type, props) {
  return {
    type,
    props,
    child: null,
    sibling: null,
    ____: null,
  };
}

Cevabı göster

function createFiber(type, props) {
  return {
    type,
    props,
    child: null,
    sibling: null,
    return: null,
  };
}

Fiber ağacı hangi işaretçilerle gezilir?
- prev ve next
- left ve right
- child, sibling ve return
- up ve down
Cevabı göster

child, sibling ve return — Fiber child, sibling ve return ile dolaşılır.
Fiber kavramlarını eşleştir

child

Çocuk fiber
sibling

Kardeş fiber
return

Üst fiber
shouldYield

Duraklama kontrolü

Sıradaki ders: Commit ve çizim

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler