Host config
- React kursu
- Uzman seviye
- Ders 23/32
- 4 dk
Temel host config fonksiyonlarını öğrenirsin.
Host config detayları
Host config'in en sık kullanılan fonksiyonları createInstance, appendChild, removeChild ve commitUpdate'dir.
createInstance(type, props) hedef düğümü oluşturur. appendChild(parent, child) çocuğu ekler ve parent döndürür. commitUpdate özellik değişikliklerini uygular.
Bu fonksiyonlar hedef ortama göre yazılır; DOM'da createElement, terminalde düğüm nesnesi.
commitUpdate ve özellikler
commitUpdate(instance, type, oldProps, newProps) bir düğümün özelliklerini günceller. DOM'da bu, öznitelik değiştirmek demektir; terminalde metin veya renk güncellenir.
Performans için yalnızca değişen özellikleri uygularsın; tüm özellikleri silip yeniden eklemek verimsizdir.
appendChild ve removeChild da parent döndürerek zincirleme çağrıya izin verir.
Uygulama createInstance ve appendChild yaz
hostConfig yaz. createInstance: (type, props) => ({ type, props, children: [] }). appendChild: (parent, child) => { parent.children.push(child); return parent; }. Dışa aktar.
Başlangıç kodu
// hostConfig'i buraya yazÖrnek çözüm
const hostConfig = {
createInstance: (type, props) => ({ type, props, children: [] }),
appendChild: (parent, child) => {
parent.children.push(child);
return parent;
},
};
export default hostConfig;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Host config fonksiyonlarını eşleştir
| Kavram | Anlamı |
|---|---|
createInstance |
Düğüm oluşturur |
appendChild |
Çocuk ekler |
removeChild |
Çocuk çıkarır |
commitUpdate |
Özellik uygular |
2 appendChild ne döndürmelidir?
- child
- null
- undefined
- parent Doğru cevap
Açıklama: appendChild zincirleme için parent döndürür.
3 Boşluğu doldur: commitUpdate imzası
commitUpdate: (instance, type, oldProps, ____) => { /* özellikleri uygula */ },
commitUpdate: (instance, type, oldProps, newProps) => { /* özellikleri uygula */ },
Açıklama: commitUpdate newProps parametresi alır.