Elementlərin Render Edilməsi

React applikasiyalarının ən kiçik blokları elementlərdir.

Elementlər ekranda nə görmək istədiyinizi təsvir edir:

const element = <h1>Salam Dünya</h1>;

Brauzerin DOM elementlərindən fərqli olaraq React elementləri ucuz qiymətə başa gələn sadə JavaScript obyektləridir. Brauzer DOM-unu React elementləri ilə uyğunlaşdırmaq üçün React DOM paketi DOM-u yeniləyir.

Qeyd:

Elementləri daha çox tanınan “komponentlər” konsepsiyası ilə çaşdırmaq olar. Gələcək bölmədə biz komponentlər ilə tanış olacağıq. Komponentlərin elementlərdən düzəldiyindən biz qabağa atlamadan öncə bu bölməni oxumağı tövsiyə edirik.

Elementləri DOM-a Render Edin

Fərz edək ki, HTML faylında <div> elementi var:

<div id="root"></div>

Biz bu nodu “ana” DOM nodu sayırıq. Çünki bu nodun içərisində baş verən bütün dəyişikliklər React DOM tərəfindən idarə olunacaq.

Adətən, React-də düzəldilmiş applikasiyaların tək ana DOM nodu var. Əgər siz React-i mövcud applikasiyanıza inteqrasiya edirsinizsə, sizdə istədiyiniz qədər ana DOM nodları ola bilər.

React elementini ana DOM noduna render etmək üçün həm elementi həm də ana nodu ReactDOM.render() funksiyasına göndərin:

const element = <h1>Salam Dünya</h1>;
ReactDOM.render(element, document.getElementById('root'));

CodePen-də sınayın

Bu səhifə “Salam Dünya” göstərəcək.

Render Edilmiş Elementi Yeniləyin

React elementləri dəyişilməzdir. Element yarandıqdan sonra bu elementin uşaqlarını və ya atributlarını dəyişmək olmaz. Element filmdə bir kadr kimidir: hər hansı bir zamanda UI-ı təsvir edir.

Bizim indiki biliyimiz ilə UI-ı yeniləmək üçün yalnız yeni element yaradıb ReactDOM.render() funksiyasına göndərməliyik.

Aşağıda olan saat misalına baxaq:

function tick() {
  const element = (
    <div>
      <h1>Salam Dünya!</h1>
      <h2>Saat: {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));}

setInterval(tick, 1000);

CodePen-də sınayın

Bu kod hər saniyə setInterval() callback-indən ReactDOM.render() funksiyasını çağırır.

Qeyd:

Praktikada, React applikasiyalarında ReactDOM.render() funksiyası yalnız bir dəfə çağrılır. Gələcək bölmələrdə belə kodun state-li komponetlərə necə inkapsulyasiya etdiyini oyrənəcəyik.

Biz mövzuları ötürməyi tövsiyə etmirik. Çünki bu mövzular bir-birilərindən asılıdırlar.

React Yalnız Lazım Olanları Yeniləyir

React DOM, DOM-u istənilən vəziyyətə gətirmək üçün elementləri və uşaqları keçmiş versiyaları ilə müqayisə edərək yalnız lazımi DOM yeniliklərini tətbiq edir.

Siz bunu təsqid etmək üçün sonuncu misalımızı brauzer alətləri ilə yoxlaya bilərsiniz:

Bizim hər anda bütün UI ağacını təsvir edən elementi yaratmağımıza baxmayaraq React DOM yalnız dəyişiklik baş verən mətn nodlarını yeniləyir.

Bizim təcrübəmiz göstərir ki, UI-ı zaman ilə necə dəyişmək əvəzinə hər hansı bir anda necə görünəcəyi haqqda fikirləşmək bir çox baqların qarşısını alır.