注意：为了让分析更加简单，和逻辑清晰，我们去掉了部分源码和注释，只留下了主要的代码和逻辑。
最近一直在研究Flutter的渲染问题，在深入探索之后发现总是绕不过三个对象分别是Widget，Element，RenderObject，那么Flutter为什么需要这三个对象，这个三个对象是什么关系？有这三个对象会提高渲染效率吗？等等这样的问题，我将在接下来的几篇文章中为大家找答案。
Widget概述
widget定义
先给出Widget的定义，可能和你之前理解的组件有一点区别，下面是Flutter对Widget的定义。
Describes the configuration for an [Element].
翻译过来的大概意思就是，"对一个Element配置的描述"。
这个概念上透露了两点细节，第一是，Widget是Element的配置描述，有人一定会问，Element是什么呢？在下面的章节中我们将详细介绍Element。第二是，Widget只是一个配置描述，不是真正的渲染对象，这里可能有点绕。举个例子，看大家能不能理解，Widget就好比是Android开发中的xml，只是描述了一些View的颜色，大小等，真正在屏幕上显示的是View。
在Flutter中，一切都是组件。在移动端开发中组件的概念很常见，比如Android的四大组件，Flutter把组件的概念发挥到了极致，在Flutter中，手势（GestureDetector）都是组件，下面是GestureDetector的源码。
class GestureDetector extends StatelessWidget {
}
abstract class StatelessWidget extends Widget {
}
GestureDetector继承自StatelessWidget，StatelessWidget是没有状态的组件，这个类继承Widget，可以看出来GestureDetector也是Widget，接下来我们简单分析一下Widget，下面是Widget的源码。
abstract class Widget {
const Widget({ this.key });
final Key key;
@protected
Element createElement();//注释1
static bool canUpdate(Widget oldWidget, Widget newWidget) {//注释2
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
}
原来Widget是一个抽象类，这个类有一个构造函数，参数是一个key，这个key有一个很重要的功能，用途是比较两个Widget是不是同一个Widget，在注释2就用到了这个key。然后有两个方法，分别是createElement()和一个静态的方法canUpdate()。
- 注释1
createElement()是一个抽象方法，子类必须实现这个方法，但是大部分我们用都是系统的Widget，比如StatefulWidget和StatelessWidget，他们都默认实现了这方法，这方法也非常简单，创建了一个Element。这里面隐含了一很重要问题的答案，开篇我们问了这样的问题，这个三个对象是什么关系？现在我们至少知道了Widget和Element的关系了，一个Widget有一个Element对象，是通过createElement()创建的。
- 注释2
canUpdate()方法很简单，就是判断oldWidget和newWidget是不是同一个Widget，如果他们的runtimeType和key相同，就认为是同一个Widget。
Widget的特性
Widget是一个很重要的概念，但是Widget有一个更重重要的特性，就是Widget是immutable（不可变的）的，这是什么意思？下面我们讲解一下，我们拿Opacity为例给大家讲解，讲解之前我们先看一下Opacity的继承关系。（在讲源码之前我们先看一下Opacity的职责是什么，Opacity是一个能让他的孩子透明的组件，很简单也很容易理解。）
class Opacity extends SingleChildRenderObjectWidget {
}
abstract class SingleChildRenderObjectWidget extends RenderObjectWidget {
}
abstract class RenderObjectWidget extends Widget {
}
从上面可以看出来，Opacity继承自SingleChildRenderObjectWidget，这类只包含了一个child的Widget，它继承自RenderObjectWidget，RenderObjectWidget继承自Widget。下面是具体分析一下Opacity，下面是是源码。
class Opacity extends SingleChildRenderObjectWidget {
const Opacity({
Key key,
@required this.opacity,
Widget child,
}) : super(key: key, child: child);
final double opacity;//注释1
@override
RenderOpacity createRenderObject(BuildContext context) {//注释2
return RenderOpacity(
opacity: opacity
);
}
@override
void updateRenderObject(BuildContext context, RenderOpacity renderObject) {
renderObject
..opacity = opacity
}
}
- 注释1
在注释1处声明了一个属性，这属性是final，也就除了构造函数能给这个属性赋值之外，没有其他的办法让这个值进行改变。那我们想改变这个值怎么办，唯一的办法就是创建一个新的Opacity。
为什么这样设计呢？先透露一下这是Flutter的核心设计哲学，在接下来的章节中我们将详细为大家讲解。
总结
Widget好像是Android得一个xml配置文件，不参与真正的渲染，只是告诉渲染层我长什么样式，并且这个对象的属性是不可以改变的，要想改变只能重现创建一个对象。
Element概述
Element定义
还是老规矩，先看一下定义。
An instantiation of a [Widget] at a particular location in the tree.
翻译过来的大概意思就是，"在Element表示一个Widget树中特定位置的实例"，下面我们看一下Element类的源代码。
abstract class Element extends DiagnosticableTree implements BuildContext {
Element(Widget widget)
: _widget = widget;//注释1
@mustCallSuper
void mount(Element parent, dynamic newSlot) {//注释2
}
Element updateChild(Element child, Widget newWidget, dynamic newSlot) {
}
}
上面找了2个重点的方法和1个重要的属性，其实Element的属性和方法非常多，通过构造函数可以看出来，一个Element持有一个Widget，下面我们分析一下Element的创建过程。
Element创建
通过上面的Widget概述那一节我们知道，Widget有一个抽象方法createElement()，用来创建Element的，这个方法的具体实现有很多，我们找一个上面我们分析过的SingleChildRenderObjectWidget，这个类非常简单，只有一个child，下面看一这个类的源码。
abstract class SingleChildRenderObjectWidget extends RenderObjectWidget {
const SingleChildRenderObjectWidget({ Key key, this.child }) : super(key: key);
final Widget child;
@override
SingleChildRenderObjectElement createElement()//注释1
=> SingleChildRenderObjectElement(this);
}
上面已经说过这个类的继承关系，这个类继承RenderObjectWidget，构造函数也很简单，传入一个child，重要的是在注释1处，这个类创建一个类，是SingleChildRenderObjectElement，通过名字猜想，这一定是一个Element了，下面我们就分析一下SingleChildRenderObjectElement类。
这里验证了，Weight和Element的关系，一个Widget有一个Element对象，是通过createElement()创建的。
还在分析之前，我们先看一下SingleChildRenderObjectElement的继承关系，下面是SingleChildRenderObjectElement的继承关系。
class SingleChildRenderObjectElement extends RenderObjectElement {
}
abstract class RenderObjectElement extends Element {
}
从上面的继承关系可以看出来，SingleChildRenderObjectElement继承RenderObjectElement，而RenderObjectElement是一个Element，大家是不是发现这继承关系和SingleChildRenderObjectWidget非常像，下面是SingleChildRenderObjectElement的源码。
mount方法调用
class SingleChildRenderObjectElement extends RenderObjectElement {
SingleChildRenderObjectElement(SingleChildRenderObjectWidget widget) : super(widget);
@override
void mount(Element parent, dynamic newSlot) {
super.mount(parent, newSlot);//注释2
_child = updateChild(_child, widget.child, null);//注释1
}
}
构造函数比较简单，下面我们看一下看，mount方法（到这里有的人一定会问了，为什么上来就分析mount方法呢？等下一篇文章，我们分析一下Flutter的启动过程就清楚了），这个方法是当新创建的元素第一次添加到树中时，框架会调用此函数。
-
注释1
这方法非常关键，我们将用一个小节专门去分析，请查看
updateChild分析小节。 -
注释2
注释2处，调用了父类的mount，我们看一下父类的mount的方法。
abstract class RenderObjectElement extends Element {
RenderObjectElement(RenderObjectWidget widget) : super(widget);
RenderObject _renderObject;//注释1
@override
void mount(Element parent, dynamic newSlot) {
super.mount(parent, newSlot);
_renderObject = widget.createRenderObject(this);//注释2
attachRenderObject(newSlot);
_dirty = false;
}
}
- 注释1
在注释1处，我们发现RenderObjectElement还持有一个对象，这对象是RenderObject，我们好像明白了一点什么，Element分别持有Widget和RenderObject，到这里我们解答了这个三个对象是什么关系？的问题，一个Element包含一个RenderObject和一个Widget。
- 注释2
重点在注释2的地方，这里创建了一个RenderObject，调用的是Widget的createRenderObject方法，下面我们看一下attachRenderObject这方法，下面是attachRenderObject的源码。
abstract class RenderObjectElement extends Element {
@override
void attachRenderObject(dynamic newSlot) {
_slot = newSlot;
_ancestorRenderObjectElement = _findAncestorRenderObjectElement();//注释1
_ancestorRenderObjectElement?.insertChildRenderObject(renderObject, newSlot);
if (parentDataElement != null)
_updateParentData(parentDataElement.widget);//注释2
}
}
- 注释1
注释1正如他的名字是一样的，找到了Element树上的祖先Element，如果祖先不为空，就调用insertChildRenderObject方法，这个方法的意思就是把renderObject的child替换成newSlot。
- 注释2
用于更新布局数据的一些信息，这些信息对于后面的布局至关重要。
总结
当SingleChildRenderObjectElement被SingleChildRenderObjectWidget创建成功之后，系统会调用SingleChildRenderObjectElement的mount()，这个方法首先调用super.mount()，也就是上图的第一步。
RenderObjectElement的mount()先创建了一个RenderObject对象，也就是第二步，创建这个对象是在Widget类中创建的。
第三步，就是把这个将RenderObject添加到指定的位置的渲染树中。
