Flutter必须理解Widget、Element、RenderObject的关系（一）

Logos
5,669 阅读7分钟

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

最近一直在研究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添加到指定的位置的渲染树中。

下篇文章的内容地址：Flutter必须理解Widget、Element、RenderObject的关系（二）

其它推荐

参考

avatar
文章
阅读
粉丝