Flutter setState到底做了什么

做了flutter一年半了，最开始接触的时候很不明白页面到底是怎么更新的，只是知道setState方法可以使页面重绘，但是他到底做了什么却不知道，今天分析一下他的源码。

目录

State ---> setState

Elment ---> markNeedsBuild

WidgetsBinding.drawFrame ---> buildScope

Elment ---> rebuild

StatefulElement --- >performRebuild

至此整个setState刷新全部完成

总结

---

State ---> setState

从源码可以看出setState是State里面的一个方法

 

在State中，setState方法实际上只有一句需要注意的代码，如下所示：

 

当setState被调用的时候，当前Element会调用markNeedsBuild方法，将方法标记为需要build的。

Elment ---> markNeedsBuild

而在markNeedsBuild方法中是把这个elment标记为dirty，然后调用BuildOwner的scheduleBuildFor方法，安排重绘。

 

紧接着在scheduleBuildFor方法中将该element添加到dirty列表（实际上就就是一个元素被标记为dirty的list）

WidgetsBinding.drawFrame ---> buildScope

到此我们再往下查就查不到什么了，但是注意到scheduleBuildFor的注释

  /// Adds an element to the dirty elements list so that it will be rebuilt
  /// when [WidgetsBinding.drawFrame] calls [buildScope].

随后找到这个buildScope方法，这时我们需要留意的是方法的第一段注释最后一句话

/// Establishes a scope for updating the widget tree, and calls the given
  /// `callback`, if any. Then, builds all the elements that were marked as
  /// dirty using [scheduleBuildFor], in depth order.

按照深度顺序进行重绘

该方法内部有一个try catch,在try里面对dirty element列表进行遍历

 

标记的方法中，首先对dirty 列表按照深度顺序进行排序，然后将这个列表设置为不需要重排序的，就开始了循环遍历，每一次循环都会调用对应dirty elment的rebuild方法。

与此同时每一次循环都会执行一次重新排序

 

重绘完成后在finally中再次遍历这个dirty列表，将其中的elment冲列表中移除并清空列表。

Elment ---> rebuild

这个方法调用了一个非常重要的方法performRebuild，当然这个是一个被标记为protected的抽象方法

StatefulElement --- >performRebuild

以下是他的重写方法

 我们点开他在StatefulElement方法中的实现如下

 

这时候和生命周期didChangeDependencies关联，然后调用父级的performRebuild方法，

 

 其中built=build（）最终是调用state的build方法，在finally中将elment的_dirty置为false，最后调

用updateChild方法更新child。

方法体如下

 

通过对比新旧child以及对应的slot进行更新 （slot是由父项element配置的元素在其子项列表中的位置信息）

在updateSlotForChild方法内部是一个闭包用于更新slot信息

我们看到在else内部，首先是deactivate掉旧的child，然后插入新的child，在inflateWidget内部实际上是创建了一个新的Element

至此整个setState刷新全部完成

但是我们遗漏了一个地方，就是WidgetsBinding.drawFrame中的buildScope又是怎么调用的。

看了一下源码没看太懂，下次再分析吧

总结

实际上整个setState过程就是以下几个过程，

1、将Element标记为dirty并添加到dirty列表

2、对列表按照elment的深度顺序进行排序遍历

3、调用element的rebuild方法进而调用statefulelement的performRebuild方法

4、与state的生命周期方法didChangeDependencies进行关联，然后调用父级的performRebuild

5、和state的生命周期方法build进行关联，然后更新child