lifelong learner — urip iku urup, currently working on accenture.

React – element, rendering element

0
Degananda.com -

Element adalah sebuah plain-object yang menyusun suatu komponen. Element ini dapat berupa object jsx ataupun hanya sekedar suatu plain-text. Element yang dibuat oleh react ini berbeda dengan element yang ada pada DOM. Element yang dibuat oleh react memakan memory sangat kecil karena element ini dibuat pada react DOM. Jika kita membuat react element tanpa menggunakan JSX maka element ini akan memiliki beberapa propertis yakni :

  • Keys sebagai unique identifier
  • Props menyimpan seluruh property/data terkait yang dibutuhkan oleh elemen tersebut. Contohnya element bertipe “div” maka pada properties props ini merupakan isi dari element bertipe div tersebut.
  • Ref untuk mengasosiasikan element dengan DOM
  • Type / tipe dari element. Contohnya element tersebut berupa div ataupun ul (unordered list) dan lain sebagainnya.

ke empat properties tersebut harus didefinisikan saat membuat element tanpa menggunakan jsx yakni melalui fungsi react.createElement(). Ke empat properties tersebut diperlukan oleh react membuat menghandle seluruh proses yang terjadi dibalik layar khususnya menangani react virtual DOM.

Bayangkan jika menuliskan elemen yang merupakan penyusun dari suatu komponen harus dilakukan tanpa menggunakan jsx maka sangat banyak line of code yang harus dituliskan. dengan menggunakan JSX kita dapat membuat element bahkan suatu nested element yang kemudian akan dikonversi menjadi kode standar javascript / plain javascript object (react.createElement) secara nested. Kumpulan react element ini akan menyusun suatu komponen.

Untuk membuat react elemen dengan menggunakan JSX kode yang kita tuliskan adalah

  render() {
    
    const myElement = <h1>nama saya degananda ferdian priyambada</h1>;

    return (
      myElement
    );
  }

kode diatas akan membuat element dengan tipe “h1” atau heading 1 dengan props berupa “nama saya degananda ferdian priyambada”. Dengan menggunakan jsx kita hanya perlu menuliskannya seolah-olah seperti menulis html/xml seperti biasa. Padahal dibalik layar react element dibuat dengan mendefinisikan minimal empat properties diatas. Penulisan elemen ini ditulis dengan “const” atau konstanta karena dianggap tidak mudah untuk berubah(contextnya). Kita tidak perlu memanggil myElement dengan menggunakan bracket karena myElement tersebut bukanlah suatu javascript expression.

Rendering element

Secara tersirat react element ini merupakan salah satu mekanisme yang ada pada react virtual DOM. karena bersifat virtual maka element tersebut harus dihantarkan ke real DOM. Element tersebut akan di “render” untuk dibawa menuju Real DOM dari Virtual DOM. React mengklaim bahwa biasannya sebuah aplikasi SPA yang dibangun dengan menggunakan react hanya memiliki satu buah root DOM. Sisannya merupakan virtual dom penyusun.

Kode yang digunakan untuk melakukan render element menuju ke DOM adalah

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Namun jika kita menggunakan library create react app maka yang dilakukan render bukanlah element. Melainkan suatu komponen (komponen tersusun dari berbagai element).

import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

React element ini bersifat immutable yakni attribute atau state dari element tersebut tidak dapat diganti. Sehingga ketika kita ingin melakukan pergantian properties pada suatu react element maka yang harus dilakukan adalah melakukan render ulang terhadap element tersebut. Namun proses render tersebut (render ulang) dilakukan secara “cantik” oleh react. react akan mebandingkan nilai element sebelumnya dengan nilai element saat ini. Sehingga perubahan pada DOM hanya pada nilai yang berganti hal inilah yang membuat react memiliki performa yang sangat baik.

perhatikan kode dibawah ini

setInterval(
    function(){      
        ReactDOM.render(<App />, document.getElementById('root'));
        registerServiceWorker();     
    }, 1000
)

isi komponen app adalah

const myElement = <h1>hari ini tanggal {new Date().getTime()}</h1>;

proses re-render akan dieksekusi setiap 1 milisecond. ketika kita melakukan inspect element pada browser dapat kita lihat bahwa yang berganti hanyalah nilai milisecond yang didapatkan dari date().getTime().

perubahan yang terjadi adalah pada line yang dihighlight dengan warna kuning. Dengan mekanisme seperti ini maka react tidak melakukan render ulang terhadap seluruh element melainkan hanya pada bagian yang mengelami perubahan.