Hiểu giao diện người dùng theo cấu trúc cây

Giao diện người dùng theo cấu trúc cây

Cây là mô hình quan hệ giữa các mục và UI thường được biểu diễn bằng cấu trúc cây. Ví dụ, trình duyệt sử dụng cấu trúc cây để mô hình hóa HTML (DOM) và CSS (CSSOM). Các nền tảng di động cũng sử dụng cây để biểu diễn hệ thống phân cấp view của chúng.

Giống như trình duyệt và nền tảng di động, React cũng sử dụng cấu trúc cây để quản lý và mô hình hóa mối quan hệ giữa các component trong ứng dụng React. Những cây này là công cụ hữu ích để hiểu cách dữ liệu chảy qua ứng dụng React và cách tối ưu hóa việc render và kích thước ứng dụng.

Render Tree

Một tính năng chính của component là khả năng kết hợp component từ các component khác. Khi chúng ta lồng component, chúng ta có khái niệm về component cha và component con, trong đó mỗi component cha có thể là con của component khác.

Khi chúng ta render một ứng dụng React, chúng ta có thể mô hình hóa mối quan hệ này trong một cây, được gọi là render tree.

Đây là một ứng dụng React render những câu trích dẫn truyền cảm hứng.

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

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

Từ ứng dụng ví dụ, chúng ta có thể xây dựng render tree ở trên.

Cây được tạo thành từ các nút, mỗi nút đại diện cho một component. App, FancyText, Copyright, để kể tên một vài, tất cả đều là các nút trong cây của chúng ta.

Nút gốc trong render tree của React là component gốc của ứng dụng. Trong trường hợp này, component gốc là App và nó là component đầu tiên mà React render. Mỗi mũi tên trong cây chỉ từ component cha đến component con.

Tìm hiểu sâu

Các thẻ HTML ở đâu trong render tree?

Thêm

Bạn sẽ nhận thấy trong render tree ở trên, không có đề cập đến các thẻ HTML mà mỗi component render. Điều này là do render tree chỉ được tạo thành từ các React component.

React, với tư cách là một framework UI, là platform agnostic. Trên react.dev, chúng tôi trình bày các ví dụ render cho web, sử dụng HTML markup làm UI primitives. Nhưng một ứng dụng React cũng có thể render cho nền tảng di động hoặc desktop, có thể sử dụng các UI primitives khác như UIView hoặc FrameworkElement.

Các platform UI primitives này không phải là một phần của React. React render trees có thể cung cấp thông tin chi tiết cho ứng dụng React của chúng ta bất kể ứng dụng của bạn render cho nền tảng nào.

Một render tree đại diện cho một lần render duy nhất của ứng dụng React. Với conditional rendering, một component cha có thể render các con khác nhau tùy thuộc vào dữ liệu được truyền.

Chúng ta có thể cập nhật ứng dụng để render có điều kiện hoặc một câu trích dẫn truyền cảm hứng hoặc màu sắc.

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

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

Trong ví dụ này, tùy thuộc vào inspiration.type là gì, chúng ta có thể render <FancyText> hoặc <Color>. Render tree có thể khác nhau cho mỗi lần render.

Mặc dù render trees có thể khác nhau qua các lần render, những cây này thường hữu ích để xác định các component cấp cao và leaf component trong ứng dụng React. Các component cấp cao là những component gần nhất với component gốc và ảnh hưởng đến hiệu suất render của tất cả các component bên dưới chúng và thường chứa độ phức tạp nhất. Các leaf component ở gần đáy của cây và không có component con và thường được re-render thường xuyên.

Xác định các loại component này rất hữu ích để hiểu data flow và hiệu suất của ứng dụng của bạn.

Module Dependency Tree

Một mối quan hệ khác trong ứng dụng React có thể được mô hình hóa bằng cây là các module dependencies của ứng dụng. Khi chúng ta chia nhỏ các component và logic vào các file riêng biệt, chúng ta tạo ra các JS modules nơi chúng ta có thể export component, function, hoặc hằng số.

Mỗi nút trong module dependency tree là một module và mỗi nhánh đại diện cho một câu lệnh import trong module đó.

Nếu chúng ta lấy ứng dụng Inspirations trước đó, chúng ta có thể xây dựng một module dependency tree, hoặc dependency tree cho ngắn gọn.

Nút gốc của cây là root module, còn được gọi là entrypoint file. Nó thường là module chứa component gốc.

So sánh với render tree của cùng ứng dụng, có những cấu trúc tương tự nhưng một số khác biệt đáng chú ý:

• Các nút tạo nên cây đại diện cho các module, không phải component.
• Các module không phải component, như inspirations.js, cũng được đại diện trong cây này. Render tree chỉ bao gồm các component.
• Copyright.js xuất hiện dưới App.js nhưng trong render tree, Copyright, component, xuất hiện như một con của InspirationGenerator. Điều này là do InspirationGenerator chấp nhận JSX như children props, vì vậy nó render Copyright như một component con nhưng không import module.

Dependency trees rất hữu ích để xác định những module nào cần thiết để chạy ứng dụng React của bạn. Khi xây dựng ứng dụng React cho production, thường có một bước build sẽ bundle tất cả JavaScript cần thiết để gửi đến client. Công cụ chịu trách nhiệm cho việc này được gọi là bundler, và các bundler sẽ sử dụng dependency tree để xác định những module nào nên được bao gồm.

Khi ứng dụng của bạn phát triển, thường kích thước bundle cũng tăng theo. Kích thước bundle lớn rất tốn kém cho client để tải xuống và chạy. Kích thước bundle lớn có thể làm chậm thời gian để UI của bạn được vẽ. Hiểu được dependency tree của ứng dụng có thể giúp debug những vấn đề này.

Tóm tắt

• Cây là cách phổ biến để biểu diễn mối quan hệ giữa các thực thể. Chúng thường được sử dụng để mô hình hóa UI.
• Render trees đại diện cho mối quan hệ lồng nhau giữa các React component qua một lần render duy nhất.
• Với conditional rendering, render tree có thể thay đổi qua các lần render khác nhau. Với các giá trị props khác nhau, component có thể render các component con khác nhau.
• Render trees giúp xác định những component cấp cao và leaf component. Các component cấp cao ảnh hưởng đến hiệu suất render của tất cả component bên dưới chúng và các leaf component thường được re-render thường xuyên. Xác định chúng rất hữu ích để hiểu và debug hiệu suất render.
• Dependency trees đại diện cho các module dependencies trong ứng dụng React.
• Dependency trees được sử dụng bởi các build tools để bundle mã cần thiết để ship ứng dụng.
• Dependency trees hữu ích để debug kích thước bundle lớn làm chậm thời gian vẽ và tìm ra cơ hội để tối ưu hóa mã được bundle.