IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> Flutter setState到底做了什么 -> 正文阅读

[移动开发]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

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-08-10 13:32:03  更:2021-08-10 13:34:35 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/19 8:48:08-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码