Reconciler nedir?

Reconciler'ın diff alma yaptığını öğrenirsin.

Reconciler nedir?

Reconciler, React'in eski ve yeni bileşen ağaçlarını karşılaştırıp değişiklikleri hesaplayan parçasıdır. ReactDOM.render çıktıyı ekrana yazar; reconciler neyin değiştiğini söyler.

Eski ağaca current, yeni ağaca work-in-progress denir. İki ağaç karşılaştırılır ve farklar bir yan etki listesine eklenir.

Bu karşılaştırma diffing olarak bilinir ve O(n) karmaşıklığında çalışır; ağaç tamamen değil, katman katman taranır.

Diffing algoritması

Diffing, iki ağacı karşılaştırırken üç varsayım yapar: farklı tipteki elemanlar farklı ağaç üretir, aynı tipteli elemanlar aynı konumu korur ve key ile liste öğeleri eşleştirilir.

Bu varsayımlar sayesinde ağaç O(n)'de taranır. Tüm ihtimaller denenseydi O(n³) olurdu.

key olmazsa React listedeki öğeleri konuma göre eşleştirir; bu da gereksiz DOM güncellemelerine yol açar.

Uygulama reconcile fonksiyonunu yaz

reconcile fonksiyonu yaz. oldNode ve newNode parametreleri alsın. if (oldNode.type !== newNode.type) ile return { action: 'replace', node: newNode }. if (oldNode.props !== newNode.props) ile return { action: 'update', node: newNode }. Son olarak return { action: 'skip' }. Dışa aktar.

Örnek çözümü göster

function reconcile(oldNode, newNode) {
  if (oldNode.type !== newNode.type) {
    return { action: 'replace', node: newNode };
  }
  if (oldNode.props !== newNode.props) {
    return { action: 'update', node: newNode };
  }
  return { action: 'skip' };
}
export default reconcile;

Kendini test et

Reconciler ne yapar?
- CSS stillerini uygular
- İki ağacı karşılaştırır ve farkları hesaplar
- HTTP istekleri gönderir
- TypeScript tipleri üretir
Cevabı göster

İki ağacı karşılaştırır ve farkları hesaplar — Reconciler diffing ile değişiklikleri bulur.

Boşluğu doldur: listeye key ekle

{items.map(item => <li ____={item.id}>{item.name}</li>)}

Cevabı göster

{items.map(item => <li key={item.id}>{item.name}</li>)}

Reconciler kavramlarını eşleştir

current

Eski ağaç
work-in-progress

Yeni ağaç
diffing

Karşılaştırma
key

Liste eşleştirme

Sıradaki ders: Fiber ağacı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler