Element Tree：是什么、与RenderObject的关系及工作原理

Flutter中的Element Tree是什么？

Element Tree 是Flutter中的一个中间层次结构，基于Widget Tree创建，管理widget在应用程序中的嵌入。每个元素实例对应树中的一个widget，并存储对它的引用。元素与widget的主要区别在于，元素在重建之间保持其在树中的位置，而widget可能在每次build调用时被重新创建。

为什么需要Element Tree

没有Element Tree，Flutter就无法有效更新界面。如果每次重建都重新创建RenderObject Tree，性能将会低得无法接受。Element Tree 充当稳定器：它在更新之间保留对RenderObject和State的引用，允许Flutter仅对渲染树应用最小的更改。

元素类型

Flutter使用三种主要元素类型：用于StatelessWidget的StatelessElement，用于StatefulWidget的StatefulElement，以及用于RenderObjectWidget的LeafRenderObjectElement、SingleChildRenderObjectElement、MultiChildRenderObjectElement。每种类型都专门用于其widget类，并确定元素如何与RenderObject交互。

三层架构中Widget、Element和RenderObject的关系

三层架构 Flutter由Widget Tree（配置）、Element Tree（管理）和RenderObject Tree（渲染）组成。Element Tree是连接环节：它从Widget读取配置并将命令传递给RenderObject。没有Element Tree，框架无法有效地将声明性描述与实际渲染同步。

元素如何连接widget和RenderObject

当元素嵌入到树中时，它会检查widget的类型。如果widget是RenderObjectWidget，元素会创建相应的RenderObject并将其添加到RenderObject Tree。如果widget是LeafRenderObjectWidget，元素会创建一个叶子RenderObject。对于StatelessWidget和StatefulWidget，元素仅管理子元素的嵌入。

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

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

这个简化代码展示了Element的基本结构。每个元素存储对当前widget、父元素和子元素的引用。mount、update和unmount方法管理元素及其关联的RenderObject的生命周期。

元素生命周期：从创建到删除

每个元素在Flutter中都会经历一系列生命周期阶段：创建、挂载、更新和卸载。理解这些阶段对于调试意外行为至关重要，尤其是在处理动画、异步操作和状态管理时。

阶段1：创建元素

元素通过调用widget的createElement方法创建。对于StatelessWidget，创建StatelessElement；对于StatefulWidget，创建StatefulElement（它也会创建State对象）。对于RenderObjectWidget，创建相应的RenderObjectElement。元素的创建发生在widget首次出现在Widget Tree中时。

阶段2：挂载（mount）

挂载时，元素被添加到Element Tree并接收父元素。对于RenderObjectElement，挂载还会创建RenderObject并将其嵌入到RenderObject Tree中。如果widget是StatefulWidget，在此阶段会调用State对象的initState方法。

阶段3：更新（update）

当widget以新配置重建时，元素通过update方法接收新的widget。元素比较新旧widget的类型：如果类型匹配，元素更新其配置；如果不匹配 — 元素被卸载并创建新的元素。这称为“widget切换”，是类型更改时状态丢失的原因。

阶段4：卸载（unmount）

当widget从Widget Tree中移除时，会调用元素的unmount方法。元素从Element Tree中移除，RenderObject从RenderObject Tree中移除，对于StatefulWidget，会调用State对象的dispose方法。卸载后，如果widget再次出现在相同位置，元素可以重复使用。

键在Element Tree中的作用

键（Key） 是一种元素识别机制，它允许Flutter根据唯一标识符而不是位置来匹配新旧Widget Tree中的widget。键在处理动态列表时至关重要，其中元素的顺序可能会改变：添加、删除或重新排列元素。

键如何影响Element Tree

没有键时，Flutter根据元素在树中的位置进行匹配：旧树中位置0的元素被新树中位置0的widget替换。如果顺序发生变化，元素会混淆，状态可能丢失或绑定到错误的数据。键强制Flutter根据标识符而不是位置来查找元素。

ValueKey、ObjectKey和UniqueKey

ValueKey 使用简单的值（字符串、数字）来标识元素。ObjectKey使用对象引用 — 适用于元素没有稳定字符串标识符的情况。UniqueKey在每次创建时生成唯一标识符 — 用于每个widget实例必须是唯一的情况。

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

在这个示例中，带有item.id的ValueKey确保每个TodoItem在列表元素顺序改变时保持其状态（例如，输入字段的焦点）。没有键时，第一个位置上的元素将获得同一位置上前一个元素的状态。

Element Tree如何管理状态

状态（State）在Flutter中不存储在widget中，而是存储在元素中。当StatefulWidget重建并创建新的widget实例时，相应的StatefulElement保持对旧State对象的引用。新widget与现有的State连接，从而在重建之间保持数据。

为什么状态在重建时不会丢失

在widget重建时，Flutter创建一个新的StatefulWidget实例，但相应的StatefulElement保留在Element Tree中。元素调用State的update方法，传递新的widget。这样，State对象及其数据得以保留。状态丢失仅在widget类型更改、键更改或元素从树中移除时发生。

InheritedWidget和Element Tree

InheritedElement 是一种特殊的元素，允许子元素从父级InheritedWidget获取数据，而无需通过构造函数显式传递。当InheritedWidget更改时，InheritedElement通知所有依赖的元素，这些元素会重建。这个机制是Theme、MediaQuery和Provider的基础。

• 依赖 — 元素在调用dependOnInheritedWidgetOfExactType时注册为依赖于InheritedElement。
• 通知 — 当InheritedWidget更改时，框架将所有依赖的元素标记为需要重建。
• 重建 — 依赖的元素在下一帧中重建，根据新数据更新UI。

Element Tree对性能的影响

Element Tree 消耗内存并影响首次渲染的速度。每个元素占用一定量的内存：对widget的引用、对父级的引用、子元素列表、插槽以及RenderObjectElement的额外字段。优化Element Tree可以减少启动时间和内存消耗。

元素的重复使用

Flutter在重建时尝试重复使用元素。如果新配置中的widget具有相同的类型和键，元素不会重新创建 — 而是更新。这比创建新元素然后挂载要快得多。但是，当类型或键更改时，旧元素会被卸载，新元素从头开始创建。

RepaintBoundary和Element Tree

RepaintBoundary 在RenderObject Tree中创建一个独立的RenderRepaintBoundary，隔离树的一部分。在Element Tree级别，RepaintBoundary不会创建特殊元素 — 它使用SingleChildRenderObjectElement。差异在RenderObject级别显现：当RepaintBoundary的内容更改时，只有隔离的区域会重新绘制。

如表所示，RepaintBoundary通过隔离变化的区域显著减少了重新绘制时间。在Element Tree级别，这不需要额外的配置 — 只需将变化的widget包装在RepaintBoundary中即可。