Meydan okuma: Custom renderer iskeleti
- React kursu
- Uzman seviye
- Ders 32/32
- 6 dk
react-reconciler ile konsola yazı basan bir iskelet yazarsın.
Meydan okuma: Custom renderer iskeleti
Bu meydan okumada bir custom renderer için host config iskeleti yazacaksın. createInstance ve appendChild fonksiyonlarını tanımlayacaksın.
Bu iskelet, DOM dışı bir hedefe React çizimi için temel sağlar. Host config, terminal, canvas veya mobil natif ortamlar için yazılabilir. React çekirdek mantığı aynı kalır.
Uygulama customHostConfig yaz
customHostConfig yaz. supportsMutation: true. createInstance: (type) => ({ type, children: [] }). appendChild: (parent, child) => { parent.children.push(child); return parent; }. Dışa aktar.
Başlangıç kodu
// customHostConfig'i buraya yazÖrnek çözüm
const customHostConfig = {
supportsMutation: true,
createInstance: (type) => ({ type, children: [] }),
appendChild: (parent, child) => {
parent.children.push(child);
return parent;
},
};
export default customHostConfig;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Host config'in görevi nedir?
- Hedef ortam fonksiyonlarını sağlamak Doğru cevap
- CSS derlemek
- HTTP istekleri göndermek
- TypeScript tipleri üretmek
Açıklama: Host config hedef ortama özgü fonksiyonları sağlar.
2 Boşluğu doldur: düğüm oluştur
const hostConfig = {
____: (type) => ({ type, children: [] }),
appendChild: (parent, child) => parent.children.push(child),
};const hostConfig = {
createInstance: (type) => ({ type, children: [] }),
appendChild: (parent, child) => parent.children.push(child),
};Açıklama: createInstance ile düğüm oluşturulur.