react-reconciler
- React kursu
- Uzman seviye
- Ders 22/32
- 4 dk
react-reconciler ile bir host config yazmayı öğrenirsin.
react-reconciler
react-reconciler paketi, React'in çekirdek mantığını dışa aktarır. Reconciler(hostConfig) çağrısı bir reconciler örneği döndürür.
Bu örnek createContainer ve updateContainer yöntemleri sağlar. createContainer bir kök oluşturur; updateContainer bileşen ağacını günceller.
react-dom da aynı API'yi kullanır; fark yalnızca host config'tedir. Bu sayede tutarlılık sağlanır.
createContainer ve updateContainer
createContainer bir kök fiber oluşturur ve bir konteyner nesnesine bağlar. updateContainer(element, container, ...) ile yeni bileşen ağacını köke gönderirsin.
İlk çağrıda tüm ağaç çizilir; sonraki çağrılarda yalnızca farklar uygulanır. Bu, React'in etkin güncelleme mekanizmasıdır.
Konteyner, hedef ortamın kök düğümüdür; DOM'da bir div, terminalde kök nesne.
Uygulama reconciler kurulumunu yaz
Reconciler kurulumu yaz. Reconciler içe aktar. hostConfig içe aktar. const reconciler = Reconciler(hostConfig) ile reconciler oluştur ve dışa aktar.
Başlangıç kodu
// reconciler kurulumunu buraya yazÖrnek çözüm
import Reconciler from 'react-reconciler';
import hostConfig from './hostConfig';
const reconciler = Reconciler(hostConfig);
export default reconciler;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boşluğu doldur: reconciler oluştur
import Reconciler from 'react-reconciler';
import hostConfig from './hostConfig';
const ____ = Reconciler(hostConfig);import Reconciler from 'react-reconciler';
import hostConfig from './hostConfig';
const reconciler = Reconciler(hostConfig);Açıklama: Reconciler(hostConfig) ile reconciler oluşur.
2 updateContainer ne yapar?
- Kök oluşturur
- Host config yazdırır
- Bileşen ağacını günceller Doğru cevap
- TypeScript tipleri üretir
Açıklama: updateContainer yeni ağacı köke gönderir.
3 react-reconciler kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
Reconciler |
Örnek oluşturur |
createContainer |
Kök fiber |
updateContainer |
Ağacı günceller |
hostConfig |
Hedef fonksiyonları |