Hiểu Giao Diện Người Dùng của Bạn như một Cây

Giao Diện Người Dùng của Bạn như một Cây

Cây là một 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 chế độ xem 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 một ứ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 một ứng dụng React và cách tối ưu hóa việc render và kích thước ứng dụng.

Cây Render

Một tính năng chính của component là khả năng kết hợp các component của các component khác. Khi chúng ta lồng các component, chúng ta có khái niệm về component cha và component con, trong đó mỗi component cha có thể là một component con của một 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à cây render.

Đây là một ứng dụng React render các 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 cây render ở trên.

Cây bao gồm các node, mỗi node đại diện cho một component. App, FancyText, Copyright, là một vài node trong cây của chúng ta.

Node gốc trong một cây render 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 React render. Mỗi mũi tên trong cây trỏ từ một component cha đến một component con.

Tìm hiểu sâu

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

Thêm

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

React, với tư cách là một framework UI, không phụ thuộc vào nền tảng. Trên react.dev, chúng tôi giới thiệu các ví dụ render lên web, sử dụng đánh dấu HTML làm các primitive UI của nó. Nhưng một ứng dụng React cũng có thể render lên một nền tảng di động hoặc máy tính để bàn, có thể sử dụng các primitive UI khác nhau như UIView hoặc FrameworkElement.

Các primitive UI nền tảng này không phải là một phần của React. Cây render React có thể cung cấp cái nhìn sâu sắc về ứng dụng React của chúng ta bất kể ứng dụng của bạn render lên nền tảng nào.

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

Chúng ta có thể cập nhật ứng dụng để render có điều kiện 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>. Cây render có thể khác nhau cho mỗi lần render.

Mặc dù cây render có thể khác nhau giữa các lần render, nhưng những cây này thường hữu ích để xác định component cấp cao nhất và component lá trong một ứng dụng React. Các component cấp cao nhất là các component gần component gốc nhất 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 cao nhất. Các component lá nằm gần cuối cây và không có component con và thường được render lại thường xuyên.

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

Cây Phụ Thuộc Module

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

Mỗi node trong một cây phụ thuộc module 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 cây phụ thuộc module, hoặc cây phụ thuộc cho ngắn gọn.

Node gốc của cây là module gốc, còn được gọi là tệp điểm vào. Nó thường là module chứa component gốc.

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

• Các node 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 biểu diễn trong cây này. Cây render chỉ bao gồm các component.
• Copyright.js xuất hiện bên dưới App.js nhưng trong cây render, Copyright, component, xuất hiện như một component con của InspirationGenerator. Điều này là do InspirationGenerator chấp nhận JSX làm children props, vì vậy nó render Copyright như một component con nhưng không import module.

Cây phụ thuộc rất hữu ích để xác định những module nào là cần thiết để chạy ứng dụng React của bạn. Khi xây dựng một ứng dụng React cho production, thường có một bước build sẽ gói 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à bundler sẽ sử dụng cây phụ thuộc để 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, kích thước bundle thường cũng tăng lên. Kích thước bundle lớn tốn kém cho client để tải xuống và chạy. Kích thước bundle lớn có thể trì hoãn thời gian để UI của bạn được vẽ. Nhận biết về cây phụ thuộc của ứng dụng của bạn có thể giúp gỡ lỗi các vấn đề này.

Tóm tắt

• Cây là một 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.
• Cây render biểu diễn mối quan hệ lồng nhau giữa các component React trên một lần render duy nhất.
• Với render có điều kiện, cây render có thể thay đổi trên các lần render khác nhau. Với các giá trị prop khác nhau, các component có thể render các component con khác nhau.
• Cây render giúp xác định component cấp cao nhất và component lá là gì. Các component cấp cao nhất ảnh hưởng đến hiệu suất render của tất cả các component bên dưới chúng và các component lá thường được render lại thường xuyên. Xác định chúng rất hữu ích để hiểu và gỡ lỗi hiệu suất render.
• Cây phụ thuộc biểu diễn các phụ thuộc module trong một ứng dụng React.
• Cây phụ thuộc được sử dụng bởi các công cụ build để gói mã cần thiết để gửi một ứng dụng.
• Cây phụ thuộc rất hữu ích để gỡ lỗi kích thước bundle lớn làm chậm thời gian vẽ và phơi bày các cơ hội để tối ưu hóa những gì mã được gói.