Custom renderer nedir?
- React kursu
- Uzman seviye
- Ders 21/32
- 4 dk
React'ten başka bir hedefe (terminal, canvas) çizim yapabileceğini öğrenirsin.
Custom renderer nedir?
Custom renderer, React'i DOM dışında bir hedefe çizen uygulamadır. Örneğin terminal, canvas veya mobil natif bileşenler bir hedef olabilir.
react-reconciler paketi, React'in çekirdek mantığını sağlar; sen yalnızca host config yazarsın. Bu config, createInstance, appendChild gibi fonksiyonları içerir.
react-dom ve react-native de aynı reconciler'ı kullanır; fark host config'tedir.
Host config
Host config, reconciler'ın çağırdığı fonksiyonlar kümesidir. En önemli olanlar: createInstance (yeni düğüm), appendChild (çocuk ekle), removeChild (çocuk çıkar) ve commitUpdate (özellik güncelle).
Bu fonksiyonlar hedef ortama göre yazılır. DOM'da document.createElement kullanılırken, terminalde bir düğüm nesnesi oluşturulur.
supportsMutation: true ile mutasyon modu açılır; bu, doğrudan güncelleme yapmaya izin verir.
Uygulama hostConfig skeleton yaz
hostConfig yaz. supportsMutation: true. createInstance: (type) => ({ type, children: [] }). appendChild: (parent, child) => parent.children.push(child). Dışa aktar.
Başlangıç kodu
// hostConfig'i buraya yazÖrnek çözüm
const hostConfig = {
supportsMutation: true,
createInstance: (type) => ({ type, children: [] }),
appendChild: (parent, child) => parent.children.push(child),
};
export default hostConfig;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Custom renderer neyi sağlar?
- Daha hızlı derlemeyi
- DOM dışına çizmeyi Doğru cevap
- Daha küçük paketi
- TypeScript desteğini
Açıklama: Custom renderer DOM dışı hedefe çizer.
2 Boşluğu doldur: mutasyon modunu aç
const hostConfig = {
____: true,
createInstance: (type) => ({ type, children: [] }),
};const hostConfig = {
supportsMutation: true,
createInstance: (type) => ({ type, children: [] }),
};Açıklama: true mutasyon modunu açar.
3 Host config fonksiyonlarını eşleştir
| Kavram | Anlamı |
|---|---|
createInstance |
Yeni düğüm oluşturur |
appendChild |
Çocuk ekler |
removeChild |
Çocuk çıkarır |
commitUpdate |
Özellik günceller |