前言：Flutter官方文档里的一句话：you build your UI out of widgets（使用Flutter开发UI界面时，都是使用Widget），然而，Widget并不是我们真正看到的视图，背后究竟是什么？其实Flutter Framework提供了三种视图树，即：Widget  Element  RenderObject,只不过，我们使用Flutter开发界面时，通常只和widget打交道，就如前文中所展示的Materail风格或者Cupertino（IOS风格）的各种Widget,然而Flutter界面开发是一种响应式编程，并且Widget都是immutable的，那么，真正的渲染，刷新，布局这些问题是谁来处理呢？本文就来了解一下除了Widget，还有哪些基础类在背后支撑Widget的快速轻量渲染；

　　Widget部分:

Widget是用户界面的一部分,并且是不可变的（immutable）。Widget会被inflate到Element,并由Element管理底层渲染树。Widget本身没有可变状态（所有的字段必须是final）。如果想要把可变状态与Widget关联起来，可以使用StatefulWidget，StatefulWidget通过使用StatefulWidget.createState方法创建State对象，并将之扩充到Element以及合并到树中；

给定的Widget可以被包含在树中（零次或多次）。一个给定的Widget可以放置在树中多次，比如：多个TextWidget。每次将一个Widget放入树中时，它都会被扩充到一个Element中，这也意味着多次并入树中的Widget将会被多次扩充进对应的element。

Widget中的Key这个属性控制一个Widget如何替换树中的另一个Widget。如果两个Widget的runtimeType和key属性相等（==），则新的widget通过更新Element（即通过使用新的Widget调用Element.update）来替换旧的Widget。否则，如果两个Widget的runtimeType和key属性不相等，则旧的Element将从树中被移除，新的Widget将被扩充到一个新的Element中，这个新的Element将被插入树中。

这里主要涉及到Widget的更新和移除，插入等操作，在执行此操作前，会用Widget的两个属性:runtimeType和key来进行对比判断；

　　Element部分

Flutter创建Element的可见树，相对于Widget来说，是可变的，通常的Flutter界面开发中，我们不用直接操作Element,而是由框架层实现内部逻辑；就如一个UI视图树中，可能包含有多个TextWidget(Widget被使用多次)，但是放在内部视图树的视角，这些TextWidget都是填充到一个个独立的Element中；

同样，我们先来看一下Element这个类中的属性：

Widget描述如何配置子树，但由于Widget是不可变的(immutable)，因此可以使用相同的Widget同时配置多个子树。Element表示Widget配置树中的特定位置的实例。随着时间的推移，与给定Element关联的Widget可能随时会发生变化，例如，如果父Widget重建并为此位置创建新的Widget。Element构成一棵树。大多数Element都有一个唯一的子Element，但是一些Widget（例如RenderObjectElement的子类）可以有多个子Element。

Element具有以下生命周期：

• 框架层通过调用即将被用来作为Element的初始化配置信息的Widget的Widget.createElement方法来创建Element;

• 框架层通过调用mount方法来将新创建的Element添加到给定父级中给定槽点的树上。 mount方法负责将任何Widget扩充到Widget并根据需要调用attachRenderObject，以将任何关联的渲染对象附加到渲染树上。

• 此时，Element被视为“激活的”，并可能出现在屏幕上。
• 在某些情况下，父(Element)可能会更改用于配置此Element的Widget，例如因为父Element重新创建了新状态。发生这种情况时，框架层将调用新的Widget的update方法。新Widget将始终具有与旧Widget相同的runtimeType和key属性。如果父Element希望在树中的此位置更改Widget的runtimeType或key，可以通过unmounting(卸载)此Element并在此位置扩充新Widget来实现。

• 在某些时候，祖先Element可能会决定从树中移除该Element（或中间祖先Element），祖先Element自己通过调用deactivateChild来完成该操作。停用中间祖先将从渲染树中移除该Element的渲染对象，并将此Element添加到owner属性中的非活动元素列表中，从而让框架层调用deactivate方法作用在此Element上。
• 此时，该Element被视为“无效状态”，并且不会出现在屏幕上。一个Element可以保持”非活动"状态，直到当前动画帧结束。在动画帧结束时，任何仍处于非活动状态的Element都将被卸载。
• 如果Element被重新组合到树中（例如，因为它或其祖先之一有一个全局键(global key)被重用），框架层将从owner属性中的非活动Element列表中移除该Element，并调用该Element的activate方法，并重新附加Element的渲染对象到渲染树。 （此时，Element再次被视为“活动状态”并可能出现在屏幕上。）
• 如果Element在当前动画帧的末尾没有被重新组合到树中，则框架层将调用该元素的unmount方法。
• 此时，该元素被视为“已停用”，并且将来不会并入树中。

由此我们可知：Element存放Widget上下文，通过遍历视图树，Element 同时持有 Widget 和 RenderObject；

　　RenderObject部分