Memahami 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](/learn/ your-first-component#nesting-and-organizing-components) , 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 root component 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>
    </>
  );
}

In this example, depending on what inspiration.type is, we may render <FancyText> or <Color>. The render tree may be different for each render pass.

Although render trees may differ across render passes, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.

Identifying these categories of components are useful for understanding data flow and performance of your app.

The Module Dependency Tree

Another relationship in a React app that can be modeled with a tree are an app’s module dependencies. As we break up our components and logic into separate files, we create JS modules where we may export components, functions, or constants.

Each node in a module dependency tree is a module and each branch represents an import statement in that module.

If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short.

The root node of the tree is the root module, also known as the entrypoint file. It often is the module that contains the root component.

Comparing to the render tree of the same app, there are similar structures but some notable differences:

• The nodes that make-up the tree represent modules, not components.
• Non-component modules, like inspirations.js, are also represented in this tree. The render tree only encapsulates components.
• Copyright.js appears under App.js but in the render tree, Copyright, the component, appears as a child of InspirationGenerator. This is because InspirationGenerator accepts JSX as children props, so it renders Copyright as a child component but does not import the module.

Dependency trees are useful to determine what modules are necessary to run your React app. When building a React app for production, there is typically a build step that will bundle all the necessary JavaScript to ship to the client. The tool responsible for this is called a bundler, and bundlers will use the dependency tree to determine what modules should be included.

As your app grows, often the bundle size does too. Large bundle sizes are expensive for a client to download and run. Large bundle sizes can delay the time for your UI to get drawn. Getting a sense of your app’s dependency tree may help with debugging these issues.

Rekap

• Trees are a common way to represent the relationship between entities. They are often used to model UI.
• Render trees represent the nested relationship between React components across a single render.
• With conditional rendering, the render tree may change across different renders. With different prop values, components may render different children components.
• Render trees help identify what the top-level and leaf components are. Top-level components affect the rendering performance of all components beneath them and leaf components are often re-rendered frequently. Identifying them is useful for understanding and debugging rendering performance.
• Dependency trees represent the module dependencies in a React app.
• Dependency trees are used by build tools to bundle the necessary code to ship an app.
• Dependency trees are useful for debugging large bundle sizes that slow time to paint and expose opportunities for optimizing what code is bundled.