Element Tree: định nghĩa, mối quan hệ với RenderObject và nguyên lý hoạt động

Element Tree trong Flutter là gì?

Element Tree là một hệ thống phân cấp trung gian trong Flutter được tạo dựa trên Widget Tree và quản lý việc chèn các widget vào ứng dụng. Mỗi phiên bản phần tử tương ứng với một widget trong cây và lưu trữ tham chiếu đến nó. Sự khác biệt chính giữa phần tử và widget là phần tử giữ nguyên vị trí của nó trong cây giữa các lần xây dựng lại, trong khi widget có thể được tạo lại mỗi lần gọi build.

Tại sao cần Element Tree

Không có Element Tree, Flutter không thể cập nhật giao diện một cách hiệu quả. Nếu mỗi lần xây dựng lại tạo lại RenderObject Tree, hiệu suất sẽ thấp không thể chấp nhận được. Element Tree hoạt động như một bộ ổn định: nó giữ các tham chiếu đến RenderObject và State giữa các lần cập nhật, cho phép Flutter chỉ áp dụng những thay đổi tối thiểu cho cây kết xuất.

Các loại phần tử

Flutter sử dụng ba loại phần tử chính: StatelessElement cho StatelessWidget, StatefulElement cho StatefulWidget, và LeafRenderObjectElement, SingleChildRenderObjectElement, MultiChildRenderObjectElement cho RenderObjectWidget. Mỗi loại được chuyên biệt hóa cho lớp widget của nó và xác định cách phần tử tương tác với RenderObject.

Mối quan hệ giữa Widget, Element và RenderObject trong kiến trúc ba lớp

Kiến trúc ba lớp của Flutter bao gồm Widget Tree (cấu hình), Element Tree (quản lý) và RenderObject Tree (kết xuất). Element Tree là mắt xích kết nối: nó đọc cấu hình từ Widget và truyền lệnh đến RenderObject. Không có Element Tree, framework không thể đồng bộ hóa hiệu quả mô tả khai báo với kết xuất thực tế.

Cách phần tử kết nối widget và RenderObject

Khi một phần tử được gắn vào cây, nó kiểm tra loại widget. Nếu widget là RenderObjectWidget, phần tử tạo RenderObject tương ứng và thêm nó vào RenderObject Tree. Nếu widget là LeafRenderObjectWidget, phần tử tạo một RenderObject lá. Đối với StatelessWidget và StatefulWidget, phần tử chỉ đơn giản quản lý việc gắn các phần tử con.

abstract class Element {
  Widget widget;
  Element? parent;
  List<Element>? children;

  void mount(Element? parent, dynamic newSlot);
  void update(Widget newWidget);
  void unmount();
}

Đoạn mã đơn giản hóa này cho thấy cấu trúc cơ bản của Element. Mỗi phần tử lưu trữ tham chiếu đến widget hiện tại, phần tử cha và các phần tử con. Các phương thức mount, update và unmount quản lý vòng đời của phần tử và RenderObject liên quan của nó.

Vòng đời của phần tử: từ tạo đến xóa

Mỗi phần tử trong Flutter trải qua một chuỗi các giai đoạn vòng đời: tạo, gắn kết, cập nhật và tháo gỡ. Hiểu các giai đoạn này là cần thiết để gỡ lỗi hành vi không mong muốn, đặc biệt khi làm việc với hoạt ảnh, thao tác bất đồng bộ và quản lý trạng thái.

Giai đoạn 1: Tạo phần tử

Một phần tử được tạo bằng cách gọi phương thức createElement của widget. Đối với StatelessWidget, StatelessElement được tạo; đối với StatefulWidget, StatefulElement được tạo (cũng tạo một đối tượng State). Đối với RenderObjectWidget, RenderObjectElement tương ứng được tạo. Việc tạo phần tử xảy ra khi widget xuất hiện lần đầu tiên trong Widget Tree.

Giai đoạn 2: Gắn kết (mount)

Trong quá trình gắn kết, phần tử được thêm vào Element Tree và nhận một phần tử cha. Đối với RenderObjectElement, gắn kết cũng tạo một RenderObject và chèn nó vào RenderObject Tree. Nếu widget là StatefulWidget, phương thức initState của đối tượng State được gọi ở giai đoạn này.

Giai đoạn 3: Cập nhật (update)

Khi widget được xây dựng lại với cấu hình mới, phần tử nhận widget mới thông qua phương thức update. Phần tử so sánh loại của widget cũ và mới: nếu loại khớp, phần tử cập nhật cấu hình của nó; nếu không, phần tử bị tháo gỡ và một phần tử mới được tạo. Đây được gọi là "thay đổi widget" và là nguyên nhân mất trạng thái khi thay đổi loại.

Giai đoạn 4: Tháo gỡ (unmount)

Khi một widget bị xóa khỏi Widget Tree, phương thức unmount của phần tử được gọi. Phần tử bị xóa khỏi Element Tree, RenderObject bị xóa khỏi RenderObject Tree, và đối với StatefulWidget, phương thức dispose của đối tượng State được gọi. Sau khi tháo gỡ, phần tử có thể được tái sử dụng nếu widget xuất hiện lại ở cùng vị trí.

Vai trò của khóa trong Element Tree

Khóa (Key) là cơ chế nhận dạng phần tử cho phép Flutter so khớp các widget từ Widget Tree cũ và mới không theo vị trí mà theo một định danh duy nhất. Khóa cực kỳ quan trọng khi làm việc với danh sách động nơi thứ tự các phần tử có thể thay đổi: thêm, xóa hoặc sắp xếp lại các phần tử.

Khóa ảnh hưởng đến Element Tree như thế nào

Không có khóa, Flutter so khớp các phần tử theo vị trí của chúng trong cây: phần tử ở vị trí 0 của cây cũ được thay thế bằng widget ở vị trí 0 của cây mới. Nếu thứ tự đã thay đổi, các phần tử bị trộn lẫn và trạng thái có thể bị mất hoặc bị ràng buộc với dữ liệu không chính xác. Một khóa buộc Flutter tìm kiếm phần tử theo định danh thay vì theo vị trí.

ValueKey, ObjectKey và UniqueKey

ValueKey sử dụng một giá trị đơn giản (chuỗi, số) để nhận dạng một phần tử. ObjectKey sử dụng tham chiếu đối tượng — phù hợp khi phần tử không có định danh chuỗi ổn định. UniqueKey tạo một định danh duy nhất mỗi lần tạo — được sử dụng khi mỗi phiên bản widget phải là duy nhất.

Column(
  children: items.map((item) => TodoItem(
    key: ValueKey(item.id),
    title: item.title,
    isDone: item.isDone,
  )).toList(),
)

Trong ví dụ này, ValueKey với item.id đảm bảo mỗi TodoItem giữ trạng thái của nó (ví dụ: tiêu điểm của trường nhập) khi thứ tự các phần tử trong danh sách thay đổi. Không có khóa, phần tử ở vị trí đầu tiên sẽ nhận trạng thái của phần tử trước đó ở cùng vị trí.

Cách Element Tree quản lý trạng thái

Trạng thái (State) trong Flutter không được lưu trữ trong widget mà trong các phần tử. Khi StatefulWidget được xây dựng lại và tạo một phiên bản widget mới, StatefulElement tương ứng giữ tham chiếu đến đối tượng State cũ. Widget mới được liên kết với State hiện có, cho phép dữ liệu được bảo toàn giữa các lần xây dựng lại.

Tại sao trạng thái không bị mất khi xây dựng lại

Trong quá trình xây dựng lại widget, Flutter tạo một phiên bản mới của StatefulWidget, nhưng StatefulElement tương ứng vẫn ở trong Element Tree. Phần tử gọi phương thức update trên State, truyền widget mới. Do đó, đối tượng State và dữ liệu của nó được bảo toàn. Mất trạng thái chỉ xảy ra khi loại widget thay đổi, khóa thay đổi hoặc phần tử bị xóa khỏi cây.

InheritedWidget và Element Tree

InheritedElement là một phần tử đặc biệt cho phép các phần tử con nhận dữ liệu từ InheritedWidget cha mà không cần truyền rõ ràng qua hàm tạo. Khi InheritedWidget thay đổi, InheritedElement thông báo cho tất cả các phần tử phụ thuộc, chúng sẽ được xây dựng lại. Cơ chế này là nền tảng của Theme, MediaQuery và Provider.

• Sự phụ thuộc — một phần tử đăng ký phụ thuộc vào InheritedElement khi gọi dependOnInheritedWidgetOfExactType.
• Thông báo — khi InheritedWidget thay đổi, framework đánh dấu tất cả các phần tử phụ thuộc là cần xây dựng lại.
• Xây dựng lại — các phần tử phụ thuộc được xây dựng lại trong khung hình tiếp theo, cập nhật giao diện theo dữ liệu mới.

Tác động của Element Tree đến hiệu suất

Element Tree tiêu thụ bộ nhớ và ảnh hưởng đến tốc độ kết xuất đầu tiên. Mỗi phần tử chiếm một lượng bộ nhớ nhất định: tham chiếu đến widget, tham chiếu đến cha, danh sách các phần tử con, một khe và các trường bổ sung cho RenderObjectElement. Tối ưu hóa Element Tree giảm thời gian khởi động và giảm tiêu thụ bộ nhớ.

Tái sử dụng phần tử

Flutter cố gắng tái sử dụng các phần tử trong quá trình xây dựng lại. Nếu widget trong cấu hình mới có cùng loại và khóa, phần tử không được tạo lại — nó được cập nhật. Điều này nhanh hơn đáng kể so với việc tạo một phần tử mới với việc gắn kết sau đó. Tuy nhiên, khi loại hoặc khóa thay đổi, phần tử cũ bị tháo gỡ và một phần tử mới được tạo từ đầu.

RepaintBoundary và Element Tree

RepaintBoundary tạo một RenderRepaintBoundary riêng biệt trong RenderObject Tree để cô lập một phần của cây. Ở cấp Element Tree, RepaintBoundary không tạo phần tử đặc biệt — nó sử dụng SingleChildRenderObjectElement. Sự khác biệt xuất hiện ở cấp RenderObject: khi nội dung của RepaintBoundary thay đổi, chỉ khu vực bị cô lập được vẽ lại.

Như bảng cho thấy, RepaintBoundary giảm đáng kể thời gian vẽ lại bằng cách cô lập khu vực thay đổi. Ở cấp Element Tree, điều này không yêu cầu cấu hình bổ sung — chỉ cần bọc widget có thể thay đổi trong RepaintBoundary.