| |
|
开发:
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方法可以使页面重绘,但是他到底做了什么却不知道,今天分析一下他的源码。 目录 WidgetsBinding.drawFrame ---> buildScope StatefulElement --- >performRebuild 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的注释
随后找到这个buildScope方法,这时我们需要留意的是方法的第一段注释最后一句话
按照深度顺序进行重绘 该方法内部有一个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 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年2日历 | -2025/2/5 22:10:03- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |