Fiber ağacı
- React kursu
- Uzman seviye
- Ders 18/32
- 4 dk
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.
Başlangıç kodu
// createFiber fonksiyonunu buraya yazÖrnek çözüm
function createFiber(type, props) {
return {
type,
props,
child: null,
sibling: null,
return: null,
};
}
export default createFiber;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boşluğu doldur: fiber düğümü oluştur
function createFiber(type, props) {
return {
type,
props,
child: null,
sibling: null,
____: null,
};
}function createFiber(type, props) {
return {
type,
props,
child: null,
sibling: null,
return: null,
};
}Açıklama: Fiber düğümü return işaretçisi taşır.
2 Fiber ağacı hangi işaretçilerle gezilir?
- prev ve next
- left ve right
- child, sibling ve return Doğru cevap
- up ve down
Açıklama: Fiber child, sibling ve return ile dolaşılır.
3 Fiber kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
child |
Çocuk fiber |
sibling |
Kardeş fiber |
return |
Üst fiber |
shouldYield |
Duraklama kontrolü |