React-də render etmənin əsas xüsusiyyəti nədir?

React-də rendering-in əsas xüsusiyyəti Virtual DOM və Reconcilation alqoritmindən istifadə etməkdir, bu da istifadəçi interfeysinin səmərəli yenilənməsini təmin edir.

Virtual DOM, real DOM-un yaddaşda yüngül nümayişidir. React, istifadəçi interfeysinin hazırkı vəziyyətini təmsil edən Virtual DOM elementləri ağacını qurur.

Bir komponentin vəziyyəti və ya props dəyişdikdə, React yeni Virtual DOM ağacı yaradır. Sonra, bu yeni ağacı əvvəlki ilə müqayisə edir ("diffing" adlanan proses) və reconciliation alqoritmindən istifadə edir.

Reconciliation alqoritmi, real DOM-u yeni Virtual DOM ilə sinxronlaşdırmaq üçün lazım olan minimal dəyişikliklər toplusunu müəyyən edir. Bütün DOM-u yenidən çəkmək əvəzinə, React yalnız dəyişmiş hissələri yeniləyir.

Bu yanaşma, yavaş real DOM ilə birbaşa manipulyasiyaları minimuma endirərək performansı əhəmiyyətli dərəcədə artırır.

Proses nümunəsi:

1. İlkin render: React Virtual DOM-u yaradır və real DOM-u qurur.
2. Vəziyyət dəyişməsi: Komponent yeni məlumatlar və ya props alır.
3. Yeni Virtual DOM yaradılması: React yeni Virtual DOM ağacı qurur.
4. Diffing: Yeni Virtual DOM əvvəlki ilə müqayisə edilir.
5. Dəyişikliklərin tətbiqi: React yalnız dəyişmiş düyünləri real DOM-da yeniləyir.

// Vəziyyətli komponent nümunəsi
function Counter() {
  const [count, setCount] = React.useState(0);

  // Bu funksiya vəziyyət dəyişdikdə yenidən renderə səbəb olur
  function handleClick() {
    setCount(count + 1);
  }

  return (
    // Butona klik edildikdə handleClick çağrılır
    <button onClick={handleClick}>
      {count} dəfə kliklənib
    </button>
  );
}

Bu nümunədə, hər klikdə setCount vəziyyəti yeniləyir. React, count-un yenilənmiş dəyəri ilə yeni Virtual DOM ağacı yaradır. Reconciliation alqoritmi, yalnız düyündəki mətnin dəyişdiyini aşkar edir və yalnız onu real DOM-da yeniləyir.