Özet - Custom renderer

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.

Örnek çözümü göster

const miniHostConfig = {
  supportsMutation: true,
  createInstance: (type) => ({ type, children: [] }),
  appendChild: (parent, child) => {
    parent.children.push(child);
    return parent;
  },
};
export default miniHostConfig;

Kendini test et

Aşağıdakilerden hangisi yanlış?
- react-reconciler yalnızca sunucuda çalışır
- host config createInstance içerir
- appendChild parent döndürür
- react-dom da reconciler kullanır
Cevabı göster

react-reconciler yalnızca sunucuda çalışır — react-reconciler istemcide de çalışır.

Boşluğu doldur: reconciler oluştur

const reconciler = ____(hostConfig);

Cevabı göster

const reconciler = Reconciler(hostConfig);

Kavramları eşleştir

react-reconciler

Çekirdek mantık
host config

Hedef fonksiyonları
createInstance

Düğüm oluşturur
appendChild

Çocuk ekler

Sıradaki ders: Proje: Mikro ön yüz ve tasarım sistemi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler