问题:build方法中的widget是什么时候生成element,什么时候生成renderObject?

下面代码是怎么生成widget、element、renderObject?

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>{
  @override
  Widget build(BuildContext context) {
    return SizedBox();
  }
}

先看一张图:描述widget与element、renderObject关系

image.png

1. Element#inflateWidget()

非常重要的模板方法,干了两件重要的事:

1. createElement
   1. newWidget为StatefulWidget和StatelessWidget;创建的element则为StatefulElement和StatelessElement。其父类为ComponentElement
   2. newWidget为LeafRenderObjectWidget、SingleChildRenderObjectWidget、MultiChildRenderObjectWidget,三者父类为RenderObjectWidget;创建的element则为LeafRenderObjectElement、SingleChildRenderObjectElement、MultiChildRenderObjectElement,其父类为RenderObjectElement
2. 调用mount方法
   1. ComponentElement的mount主要是刷新，调用build方法
   2. RenderObjectElement主要调用创建RenderObject,插入到render树中

@pragma('vm:prefer-inline')
Element inflateWidget(Widget newWidget, Object? newSlot) {
  assert(newWidget != null);
  final Key? key = newWidget.key;
  /*
  1. newWidget为StatefulWidget和StatelessWidget;创建的element则为StatefulElement和StatelessElement。其父类为ComponentElement
  2. newWidget为LeafRenderObjectWidget、SingleChildRenderObjectWidget、MultiChildRenderObjectWidget,三者父类为RenderObjectWidget;创建的element则为LeafRenderObjectElement、SingleChildRenderObjectElement、MultiChildRenderObjectElement,其父类为RenderObjectElement
  */
  final Element newChild = newWidget.createElement();
  assert(() {
    _debugCheckForCycles(newChild);
    return true;
  }());
  
  /*
  newChild为RenderObjectElement和ComponentElement
  1. ComponentElement的mount主要是调用build方法
  2. RenderObjectElement主要调用创建RenderObject,插入到render树中
  */
  //调用mount
  newChild.mount(this, newSlot);
  assert(newChild._lifecycleState == _ElementLifecycle.active);
  return newChild;
}

2. StatefulWidget.createElement()

StatefulWidget创建StatefulElement

StatefulElement createElement() => StatefulElement(this);

3. StatefulElement初始化

初始化StatefulElement创建State，同时state持有widget和element。
state挂载在StatefulElement上的。

StatefulElement(StatefulWidget widget)
  : _state = widget.createState(),
    super(widget) {

  state._element = this;
  state._widget = widget;
}

4. ComponentElement#mount()

StatefulElement的父类是ComponentElement,在element初始化之后，会立即调用mount方法。相当于StatefulElement初始化方法。

@override
void mount(Element? parent, Object? newSlot) {
  super.mount(parent, newSlot);
  _firstBuild();
  assert(_child != null);
}

5. ComponentElement#_firstBuild()

mount调用到rebuild

void _firstBuild() {
  rebuild();
}

6. Element#rebuild

void rebuild() {
  performRebuild();
}

7. Element#performRebuild

performRebuild在element中是空方法,由子类实现。Element最重要的两个子类:ComponentElement与RenderObjectElement。

8. ComponentElement#performRebuild

build()在ComponentElement是空方法，由StatelessElement和StatefulElement分别实现自定义widget和state中的build方法。
把built当做参数传递给updateChild

void performRebuild() {
  Widget? built;
  try {
    built = build();
  } catch (e, stack) {
    built = ErrorWidget.builder(
      _debugReportException(
        ErrorDescription('building $this'),
        e,
        stack,
        informationCollector: () sync* {
          yield DiagnosticsDebugCreator(DebugCreator(this));
        },
      ),
    );
  } finally {

  }
  try {
    _child = updateChild(_child, built, slot);
  } catch (e, stack) {
    built = ErrorWidget.builder(
      _debugReportException(
        ErrorDescription('building $this'),
        e,
        stack,
        informationCollector: () sync* {
          yield DiagnosticsDebugCreator(DebugCreator(this));
        },
      ),
    );
    _child = updateChild(null, built, slot);
  }
}

9. Element#updateChild

updateChild是非常经典且重要的算法:

newWidget为空,child不为空，则销毁child;child为空则不操作。
newWidget不为空,child不为空:

1. hasSameSuperclass && child.widget == newWidget,判断slot是否相等，是否需要更新
2. canUpdate:则调用update。update也是非常经典的方法

newWidget不为空,child为空: 则调用inflateWidget,创建element

deactivateChild干了三件事:parent指针指向null,销毁renderObejct,element添加到_inactiveElements
inflateWidget 如果不是嵌套的StatelessWidget和StatefulWidget，而是SizedBox会调到RenderObjectWidget

@override
Element? updateChild(Element? child, Widget? newWidget, Object? newSlot) {
  if (newWidget == null) {
    if (child != null) deactivateChild(child);
    return null;
  }
  final Element newChild;
  if (child != null) {
    if (hasSameSuperclass && child.widget == newWidget) {
      if (child.slot != newSlot) updateSlotForChild(child, newSlot);
      newChild = child;
    } else if (hasSameSuperclass &&
               Widget.canUpdate(child.widget, newWidget)) {
      if (child.slot != newSlot) updateSlotForChild(child, newSlot);
      child.update(newWidget);
      newChild = child;
    } else {
      deactivateChild(child);
      newChild = inflateWidget(newWidget, newSlot);
    }
  } else {
    newChild = inflateWidget(newWidget, newSlot);
  }
  return newChild;
}

10.Element#inflateWidget() 对1的补充

newWidget是SizedBox,则createElement调用的是SingleChildRenderObjectWidget#createElement(),mount调用SingleChildRenderObjectElement#mount()

newWidget是Column,则createElement调用的是MultiChildRenderObjectWidget#createElement(),mount调用MultiChildRenderObjectWidget#mount()

@pragma('vm:prefer-inline')
Element inflateWidget(Widget newWidget, Object? newSlot) {
  final Element newChild = newWidget.createElement();
  newChild.mount(this, newSlot);
  assert(newChild._lifecycleState == _ElementLifecycle.active);
  return newChild;
}

10.1 SingleChildRenderObjectElement#mount()

@override
void mount(Element? parent, Object? newSlot) {
  super.mount(parent, newSlot);
  _child = updateChild(_child, widget.child, null);
}

10.2 MultiChildRenderObjectWidget#mount()

@override
void mount(Element? parent, Object? newSlot) {
  super.mount(parent, newSlot);
  final List<Element> children = List<Element>.filled(
    widget.children.length, _NullElement.instance,
    growable: false);
  Element? previousChild;
  for (int i = 0; i < children.length; i += 1) {
    final Element newChild = inflateWidget(
      widget.children[i], IndexedSlot<Element?>(i, previousChild));
    children[i] = newChild;
    previousChild = newChild;
  }
  _children = children;
}

11. RenderObjectElement#performRebuild

更新updateRenderObject;把dirty标记置为false

@override
void performRebuild() {
  widget.updateRenderObject(this, renderObject);
  _dirty = false;
}

组合类ComponentElement与渲染类RenderObjectElement对比:

	ComponentElement	RenderObjectElement
mount	element挂载到树上时调用mount方法,此时主要是第一次初始化,调用_firstBuild方法	主要两步:创建renderObject,并把renderObject插入到渲染树中
performRebuild	调用build方法，此方法调到自定义widget和state中的build方法。updateChild,diff算法，判断是否需要更新、创建还是销毁	更新:updateRenderObject