Flutter渲染 Widget Element RenderObject概述（一）

注意：为了让分析更加简单，和逻辑清晰，咱们去掉了部分源码和注释，只留下了主要的代码和逻辑。

最近一直在研究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

用于更新布局数据的一些信息，这些信息对于后面的布局相当重要。

总结

1. 当SingleChildRenderObjectElement被SingleChildRenderObjectWidget建立成功以后，系统会调用SingleChildRenderObjectElement的mount()，这个方法首先调用super.mount()，也就是上图的第一步。
2. RenderObjectElement的mount()先建立了一个RenderObject对象，也就是第二步，建立这个对象是在Widget类中建立的。
3. 第三步，就是把这个将RenderObject添加到指定的位置的渲染树中。