Özet - Custom renderer
- React kursu
- Uzman seviye
- Ders 24/32
- 5 dk
Konsola yazı basan küçük bir custom renderer iskeleti kurarsın.
Özet - Custom renderer
Bu grupta custom renderer'ı, react-reconciler'ı ve host config'i öğrendin.
react-reconciler çekirdek mantığı sağlar; sen yalnızca host config yazarsın. createInstance, appendChild ve commitUpdate hedef ortama göre yazılır.
Bu sayede React'i terminal, canvas veya mobil ortamlara çizebilirsin. Şimdi bir mini host config yazacaksın.
Uygulama miniHostConfig yaz
miniHostConfig yaz. supportsMutation: true. createInstance: (type) => ({ type, children: [] }). appendChild: (parent, child) => { parent.children.push(child); return parent; }. Dışa aktar.
Başlangıç kodu
// miniHostConfig'i buraya yazÖrnek çözüm
const miniHostConfig = {
supportsMutation: true,
createInstance: (type) => ({ type, children: [] }),
appendChild: (parent, child) => {
parent.children.push(child);
return parent;
},
};
export default miniHostConfig;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi yanlış?
- react-reconciler yalnızca sunucuda çalışır Doğru cevap
- host config createInstance içerir
- appendChild parent döndürür
- react-dom da reconciler kullanır
Açıklama: react-reconciler istemcide de çalışır.
2 Boşluğu doldur: reconciler oluştur
const reconciler = ____(hostConfig);const reconciler = Reconciler(hostConfig);Açıklama: Reconciler(hostConfig) ile reconciler oluşur.
3 Kavramları eşleştir
| Kavram | Anlamı |
|---|---|
react-reconciler |
Çekirdek mantık |
host config |
Hedef fonksiyonları |
createInstance |
Düğüm oluşturur |
appendChild |
Çocuk ekler |