「这是我参加2022初次更文应战的第3天，活动概况查看：2022初次更文应战」

咱们在上一篇文章中剖析了一下Flutter的三棵树：Widget树、Element树和RenderObject树；这次咱们来剖析一下，有状况和无状况Widget中的Element有什么区别？

StatelessWidget的Element

咱们首先看一下在StatelessWidget中element的创立办法：

在StatelessWidget中经过createElement()办法创立了一个StatelessElement目标，而StatelessElement承继自ComponentElement，那么咱们剖析一下ComponentElement发现，在ComponentElement中有mount办法，咱们在之前的文章中现已剖析得知，Widget创立Element之后会在Element中调用mount办法，那么咱们来剖析一下此刻的mount办法中做了什么事情：

在mount办法中，调用了_firstBuild()办法：

在_firstBuild()办法中去调用了rebuild()办法：

之后，咱们在rebuild()办法中会看到一个很重要的办法performRebuild()办法，继续往下走咱们会发现只能看到performRebuild()办法的定义：

因为此刻咱们现已进入了Element类内部，所以咱们可以猜测到performRebuild()的完成应该在Element的子类中，终究咱们在ComponentElement类中找到了performRebuild()办法的完成：

在performRebuild()办法中调用了build()，在ComponentElement类中build()办法也只要定义没有完成，那么咱们只能再去ComponentElement的子类中寻觅build办法的完成，很明显build的完成应该在StatelessElement中：

在StatelessElement中build的完成为widget.build(this)，咱们经过Debug断点履行可以看到：

• widget：为MyApp；
• this：为当时StatelessElement目标；

也便是说，此刻是MyApp在调用build办法并传递了一个参数StatelessElement，咱们看一下MyApp的完成：

这便是MyApp的build被调用，然后烘托的流程；同时也可以得到BuildContext其实也便是Element(咱们在之前的文章中运用StatefulElement也做过如下的操作)：

简略来说，StatelessWidget初始化时会经过createElement()办法创立一个StatelessElement，在createElement()办法中会调用mount办法，在mount办法中会调用Widget的build办法进行烘托并将Element自己传递出去；

StatefulWidget的Element

StatefulWidget与StatelessWidget稍有不同，在StatefulWidget中比StatelessWidget多了一个createState办法：

咱们先看一下createElement()办法创立StatefulElement的完成：

在StatefulElement的构造办法中，直接调用了widget.createState()来创立state目标，同时会将widget目标保存到state._widget中(这也是咱们在State中可以经过widget来访问Widget中定义的特点的原因)，把Element目标保存到state._element中(Widget自身与State目标共用同一个Element)；

终究经过state目标来调用build办法:

总结

• Flutter中存在三棵树：Widget树、Element树和Render树；Flutter引擎针对Render树中的目标烘托；并非每一个Widget都有Render树；
• 每一个Widget创立时，都会创立一个Element目标；
  • 经过createElement()办法创立Element目标，并将Element目标加入到Element树中，都会调用mount办法；
  • RenderElement首要是创立RenderObject
    • 经过mount办法创立RenderObject目标；
  • StatefulElement承继ComponentElement
    • 调用createState()办法，创立state目标；
    • 将Widget赋值给state目标的_widget特点；
    • 经过state的build办法将自己也便是Element传出去；
  • StatelessElement承继ComponentElement
    • 首要调用build办法将Element传递出去；