Memahami Antarmuka Pengguna (UI) Anda sebagai Pohon

UI Anda sebagai pohon

Pohon adalah model hubungan antara setiap bagian (item) dan UI yang sering direpresentasikan dengan menggunakan struktur pohon. Sebagai contoh, Peramban (browser) menggunakan struktur pohon untuk memodelkan HTML (DOM) dan CSS (CSSOM). Platform seluler (mobile) juga menggunakan pohon untuk merepresentasikan hierarki tampilan mereka.

Seperti halnya peramban (browser) dan perangkat seluler (mobile) bergerak, React juga menggunakan struktur pohon untuk mengelola dan memodelkan hubungan antar komponen dalam aplikasi React. Pohon-pohon ini adalah alat yang berguna untuk memahami bagaimana data mengalir melalui aplikasi React dan bagaimana mengoptimalkan rendering dan ukuran aplikasi.

Pohon Render

Fitur utama dari komponen adalah kemampuan untuk menyusun komponen dari komponen lain. Saat kita menyusun komponen, kita memiliki konsep komponen induk dan anak, di mana setiap komponen induk dapat menjadi anak dari komponen lain.

Ketika kita me-render aplikasi React, kita dapat memodelkan hubungan ini dalam sebuah pohon, yang dikenal sebagai pohon render.

Berikut ini adalah aplikasi React yang membuat kutipan-kutipan inspiratif.

import FancyText from './FancyText';
import InspirationGenerator from './InspirationGenerator';
import Copyright from './Copyright';

export default function App() {
  return (
    <>
      <FancyText title text="Aplikasi Dapatkan Inspirasi" />
      <InspirationGenerator>
        <Copyright year={2004} />
      </InspirationGenerator>
    </>
  );
}

Dari contoh aplikasi, kita dapat membuat pohon render di atas.

Pohon ini terdiri dari beberapa simpul, yang masing-masing mewakili sebuah komponen. App, FancyText, Copyright, dan beberapa lainnya, merupakan beberapa simpul di dalam pohon kita.

Simpul akar (root node) dalam pohon render React adalah komponen akar dari aplikasi. Dalam kasus ini, Akar komponen adalah Aplikasi dan merupakan komponen pertama yang di-render oleh React. Setiap panah pada pohon menunjuk dari komponen induk ke komponen anak.

Pendalaman

Di mana letak dari tag HTML dalam pohon render?

Tampilkan Detil

Anda akan melihat pada pohon render di atas, tidak disebutkan tag HTML yang di-render oleh setiap komponen. Hal ini dikarenakan pohon render hanya terdiri dari React components.

React, sebagai sebuah framework UI, bersifat agnostik terhadap platform. Di react.dev, kami menampilkan contoh-contoh yang di-render ke web, yang menggunakan markup HTML sebagai primitif UI-nya. Tetapi aplikasi React bisa saja merender ke platform mobile atau desktop, yang mungkin menggunakan primitif UI yang berbeda seperti UIView atau FrameworkElement.

Primitif UI platform ini bukan merupakan bagian dari React. Pohon render React dapat memberikan wawasan kepada aplikasi React kita terlepas dari platform apa aplikasi Anda di-render.

Sebuah pohon render merepresentasikan sekali render pada aplikasi React. Dengan perenderan kondisional, komponen induk dapat me-render anak yang berbeda tergantung pada data yang di-render.

Kita dapat memperbarui aplikasi untuk me-render secara bersyarat sebuah kutipan inspiratif atau warna.

import FancyText from './FancyText';
import InspirationGenerator from './InspirationGenerator';
import Copyright from './Copyright';

export default function App() {
  return (
    <>
      <FancyText title text="Aplikasi Dapatkan Inspirasi" />
      <InspirationGenerator>
        <Copyright year={2004} />
      </InspirationGenerator>
    </>
  );
}

Pada contoh ini, tergantung pada apa yang dimaksud dengan inspiration.type, Kita bisa me-render <FancyText> atau <Color>. Pohon render mungkin berbeda untuk setiap lintasan.

Meskipun pohon render (render tree) dapat berbeda di seluruh umpan (pass) render, namun secara umum pohon render (render tree) ini sangat membantu untuk mengidentifikasi apa itu top-level dan leaf component di dalam aplikasi React. Komponen tingkat atas (top-level) adalah komponen yang paling dekat dengan komponen akar (root component) dan mempengaruhi performa rendering dari semua komponen di bawahnya dan sering kali memiliki kompleksitas yang paling tinggi. Daun Komponen (leaf component) berada di dekat bagian bawah pohon dan tidak memiliki komponen turunan dan sering di-render ulang.

Mengidentifikasi kategori komponen ini berguna untuk memahami aliran data dan kinerja aplikasi Anda.

Pohon dependensi modul (Module dependency tree)

Hubungan lain dalam aplikasi React yang dapat dimodelkan dengan pohon adalah dependensi modul aplikasi. Ketika kita memecah komponen kita dan logika ke dalam berkas-berkas yang terpisah, kita membuat modul JS di mana kita bisa mengekspor komponen, fungsi, atau konstanta.

Setiap simpul (node) dalam pohon dependensi modul adalah sebuah modul dan setiap cabang merepresentasikan pernyataan import dalam modul tersebut.

Jika kita mengambil aplikasi Inspirasi sebelumnya, kita dapat membangun pohon dependensi modul, atau singkatnya pohon dependensi.

Simpul akar (root node) dari pohon adalah modul akar, juga dikenal sebagai file titik masuk (entrypoint). Sering kali modul ini adalah modul yang berisi komponen akar (root component).

Dibandingkan dengan pohon render dari aplikasi yang sama, terdapat struktur yang serupa namun ada beberapa perbedaan penting:

• Simpul (node) yang membentuk pohon mewakili modul, bukan komponen.
• Modul non-komponen, seperti inspirations.js, juga direpresentasikan dalam pohon ini. Pohon render hanya merangkum komponen.
• Copyright.js muncul di bawah App.js tetapi dalam pohon render, Copyright, Komponennya, Muncul sebagai anak dari InspirasiGenerator. Hal ini karena InspirationGenerator menerima JSX sebagai children props, Sehingga membuat Copyright sebagai komponen anak tetapi tidak mengimpor modul.

Pohon dependensi berguna untuk menentukan modul apa saja yang diperlukan untuk menjalankan aplikasi React Anda. Ketika membangun aplikasi React untuk produksi, Biasanya ada langkah build yang akan memaketkan semua JavaScript yang diperlukan untuk dikirimkan ke klien. Alat yang bertanggung jawab untuk hal ini disebut bundler, Dan bundler akan menggunakan pohon dependensi untuk menentukan modul apa saja yang harus disertakan.

Seiring dengan pertumbuhan aplikasi Anda, seringkali ukuran bundel juga bertambah. Ukuran bundel yang besar akan mahal untuk diunduh dan dijalankan oleh klien. Ukuran bundel yang besar dapat menunda waktu untuk menggambar antramuka pengguna (UI) Anda. Memahami pohon dependensi aplikasi Anda dapat membantu dalam melakukan debug terhadap masalah ini.

Rekap

• Pohon (tree) adalah cara yang umum untuk merepresentasikan hubungan antar entitas. Mereka sering digunakan untuk memodelkan antramuka pengguna (UI).
• Pohon Render (render tree) merepresentasikan hubungan bersarang antara komponen-komponen React dalam satu render.
• Dengan render bersyarat, pohon render dapat berubah pada render yang berbeda. Dengan nilai prop yang berbeda, komponen dapat me-render komponen anak (children component) yang berbeda.
• Pohon render (render tree) membantu mengidentifikasi apa yang dimaksud dengan komponen tingka atas (top-level dan daun (leaf). Komponen tingkat atas memengaruhi performa rendering semua komponen di bawahnya dan komponen daun sering di-render ulang. Mengidentifikasi komponen ini berguna untuk memahami dan men-debug performa rendering.
• Pohon dependensi (dependency tree) merepresentasikan dependensi modul dalam aplikasi React.
• Pohon dependensi (dependency tree) digunakan oleh (build tool) untuk menggabungkan kode yang diperlukan untuk mengirimkan aplikasi.
• Pohon dependensi (dependency tree) berguna untuk men-debug ukuran bundle yang besar yang memperlambat waktu untuk melukis (repaint) dan membuka peluang untuk mengoptimalkan kode yang di-bundel.