Reconciliation (tərcümədə: "barışdırma", "uyğunlaşdırma") – Virtual DOM əsaslı kitabxanalarda, xüsusilə React kimi UI kitabxanalarında istifadə olunan ağıllı yeniləmə mexanizmidir. Bu prosesin əsas məqsədi – tətbiqin vəziyyəti dəyişdikdə və ya istifadəçi ilə qarşılıqlı əlaqə baş verdikdə, DOM-a minimum dəyişikliklərlə ən səmərəli şəkildə cavab verməkdir.

Niyə Reconciliation vacibdir?

Ənənəvi DOM-da kiçik dəyişikliklər belə brauzerdə bütün elementin yenidən qurulmasına səbəb ola bilər və bu performansı aşağı sala bilər. React və oxşar kitabxanalar bunun qarşısını almaq üçün Virtual DOM adlı yüngül strukturdan istifadə edir.

Virtual DOM, komponentlərin yüngül, JavaScript əsaslı nüsxəsini saxlayır. Tətbiqin vəziyyəti dəyişdikdə:

1. Yeni Virtual DOM yaradılır.
2. Köhnə Virtual DOM ilə müqayisə edilir.
3. Reconciliation prosesi başlayır və fərqlər təyin olunur.
4. Yalnız dəyişən hissələr əsl (real) DOM-a tətbiq edilir.

Texniki olaraq necə işləyir?

• React əvvəlcə render() funksiyasını çağıraraq yeni Virtual DOM ağacını yaradır.
• Daha sonra əvvəlki ağacla yeni ağacı müqayisə edir.
• Müqayisə zamanı diffing algorithm (fərq tapma alqoritmi) istifadə olunur.
• Əgər bir elementin tipi və ya açarı (key) dəyişibsə, bütün alt ağac dəyişdirilir.
• Əgər yalnız atributlar dəyişibsə, yalnız bu fərqlər DOM-a tətbiq olunur.

Sadə Misal

Tutaq ki, sizdə belə bir komponent var:

function MyComponent() {

return <h1>Salam, Arzu!</h1>;

}

İstifadəçi adı dəyişdikdə:

function MyComponent() {

return <h1>Salam, Murad!</h1>;

}

React əvvəlki və yeni Virtual DOM-u müqayisə edir və yalnız mətn (Arzu → Murad) hissəsinin dəyişdiyini aşkar edir. Beləliklə, yalnız bu dəyişiklik real DOM-da yenilənir – bütün komponenti yenidən yaratmağa ehtiyac qalmır.

Üstünlükləri

• Performans artır – yalnız dəyişən hissələr DOM-a tətbiq olunur.
• Az CPU yükü – sistem daha az hesablama ilə daha çox iş görür.
• Təhlükəsiz dəyişikliklər – minimal müdaxilə ilə sistem sabit qalır.
• Asan proqramlaşdırma – inkişaf etdiricilər "nə olmalıdır" deyə düşünür, React isə "necə edəcəyini" avtomatik tapır.

Reconciliation və key anlayışı

key atributu React üçün çox vacibdir. Məsələn, siyahılar yaradarkən hər elementə unikallıq verərək React-ə kömək edirik ki, hansı element dəyişib, hansı silinib, hansı əlavə olunub — bu fərqləri daha düzgün və səmərəli tənzimləsin.

{users.map(user => (

<li key={user.id}>{user.name}</li>

))}

Əgər key düzgün verilməzsə, React səhvən komponenti silib yenidən yarada bilər.

Nəticə

Reconciliation – müasir UI kitabxanalarında yüksək performanslı, sürətli və ağıllı istifadəçi interfeysi yaratmaq üçün çox önəmli bir anlayışdır. Bu mexanizm inkişaf etdiricilərə təhlükəsiz, optimallaşdırılmış və istifadəçi yönümlü proqramlar yazmaq imkanı verir.