Reconciler nedir?
- React kursu
- Uzman seviye
- Ders 17/32
- 4 dk
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.
Başlangıç kodu
// reconcile fonksiyonunu buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Reconciler ne yapar?
- CSS stillerini uygular
- İki ağacı karşılaştırır ve farkları hesaplar Doğru cevap
- HTTP istekleri gönderir
- TypeScript tipleri üretir
Açıklama: Reconciler diffing ile değişiklikleri bulur.
2 Boşluğu doldur: listeye key ekle
{items.map(item => <li ____={item.id}>{item.name}</li>)}{items.map(item => <li key={item.id}>{item.name}</li>)}Açıklama: key ile liste öğeleri doğru eşleştirilir.
3 Reconciler kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
current |
Eski ağaç |
work-in-progress |
Yeni ağaç |
diffing |
Karşılaştırma |
key |
Liste eşleştirme |