Custom renderer nedir?

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.

Örnek çözümü göster

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

Kendini test et

Custom renderer neyi sağlar?
- Daha hızlı derlemeyi
- DOM dışına çizmeyi
- Daha küçük paketi
- TypeScript desteğini
Cevabı göster

DOM dışına çizmeyi — Custom renderer DOM dışı hedefe çizer.

Boşluğu doldur: mutasyon modunu aç

const hostConfig = {
  ____: true,
  createInstance: (type) => ({ type, children: [] }),
};

Cevabı göster

const hostConfig = {
  supportsMutation: true,
  createInstance: (type) => ({ type, children: [] }),
};

Host config fonksiyonlarını eşleştir

createInstance

Yeni düğüm oluşturur
appendChild

Çocuk ekler
removeChild

Çocuk çıkarır
commitUpdate

Özellik günceller

Sıradaki ders: react-reconciler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler