蓝戒博客

  • 首页
  • 研发说
  • 架构论
  • 效能录
  • AI谈
  • 随笔集
智构苍穹
融合 AI、架构与工程实践,沉淀方法论,构建可持续的技术价值。
  1. 首页
  2. 研发说
  3. 正文

Flutter系列之组件的生命周期

2022年10月29日 4089点热度 0人点赞 0条评论

什么是组件的生命周期

熟悉移动端开发的朋友对生命周期这个概念都不会陌生,如在Android、iOS、React、Vue中都会有生命周期这一概念,它定义了组件从初始化到被加载再到中间过渡态的状态改变直至被销毁整个一系列的存在过程。

Flutter 组件的生命周期及流转

Flutter组件有两类常用Widget,无状态的StatelessWidget和有状态的StatefulWidget。 

  •       无状态的 StatelessWidget
  •        有状态的 StatefulWidget

 

在开发过程中,我们经常需要继承它们两来实现自己的 Widget。

 

StatelessWidget

无状态组件是不可变的,这意味着它们的属性不能变化,所有的值都是最终的。可以理解为将外部传入的数据转化为界面展示的内容,只会渲染一次。对于无状态组件生命周期只有 build 这个过程。无状态组件的构建方法通常只在三种情况下会被调用:小组件第一次被插入树中,小组件的父组件改变其配置,以及它所依赖的 InheritedWidget 发生变化时。

 

StatefulWidget

有状态组件持有的状态可能在 Widget 生命周期中发生变化,是定义交互逻辑和业务逻辑。可以理解为具有动态可交互的内容界面,会根据数据的变化进行多次渲染。实现一个 StatefulWidget 至少需要两个类:

一个是 StatefulWidget 类。

另一个是 Sate 类。

StatefulWidget 类本身是不可变的,但是 State 类在 Widget 生命周期中始终存在。StatefulWidget 将其可变的状态存储在由 createState 方法创建的 State 对象中,或者存储在该 State 订阅的对象中。

 

StatefulWidget 生命周期

createState:

该函数为 StatefulWidget 中创建 State 的方法,当 StatefulWidget 被创建时会立即执行 createState。createState 函数执行完毕后表示当前组件已经在 Widget 树中,此时有一个非常重要的属性 mounted 被置为 true。

initState:

该函数为 State 初始化调用,只会被调用一次,因此,通常会在该回调中做一些一次性的操作,如执行 State 各变量的初始赋值、订阅子树的事件通知、与服务端交互,获取服务端数据后调用 setState 来设置 State。

didChangeDependencies:

该函数是在该组件依赖的 State 发生变化时会被调用。这里说的 State 为全局 State,例如系统语言 Locale 或者应用主题等,Flutter 框架会通知 widget 调用此回调。类似于前端 Redux 存储的 State。该方法调用后,组件的状态变为 dirty,立即调用 build 方法。

build:

主要是返回需要渲染的 Widget,由于 build 会被调用多次,因此在该函数中只能做返回 Widget 相关逻辑,避免因为执行多次而导致状态异常。

reassemble:

主要在开发阶段使用,在 debug 模式下,每次热重载都会调用该函数,因此在 debug 阶段可以在此期间增加一些 debug 代码,来检查代码问题。此回调在 release 模式下永远不会被调用

didUpdateWidget:

该函数主要是在组件重新构建,比如说热重载,父组件发生 build 的情况下,子组件该方法才会被调用,其次该方法调用之后一定会再调用本组件中的 build 方法。

deactivate:

在组件被移除节点后会被调用,如果该组件被移除节点,然后未被插入到其他节点时,则会继续调用 dispose 永久移除。

dispose:

永久移除组件,并释放组件资源。调用完 dispose 后,mounted 属性被设置为 false,也代表组件生命周期的结束。 

 

图示如下:

上图为 flutter 生命周期流程图

 

大致分为四个阶段

  1. 初始化阶段,包括两个生命周期函数 createState 和 initState;
  2. 组件创建阶段,包括 didChangeDependencies 和 build;
  3. 触发组件多次 build ,这个阶段有可能是因为 didChangeDependencies、 setState 或者 didUpdateWidget 而引发的组件重新 build ,在组件运行过程中会多次触发,这也是优化过程中需要着重注意的点;
  4. 最后是组件销毁阶段,deactivate 和 dispose。

不是生命周期但是却非常重要的几个概念

下面这些并不是生命周期的一部分,但是在生命周期中起到了很重要的作用。

mounted:是 State 中的一个重要属性,相当于一个标识,用来表示当前组件是否在树中。在 createState 后 initState 前,mounted 会被置为 true,表示当前组件已经在树中。调用 dispose 时,mounted 被置为 false,表示当前组件不在树中。

dirty:表示当前组件为脏状态,下一帧时将会执行 build 函数,调用 setState 方法或者执行 didUpdateWidget 方法后,组件的状态为 dirty。

clean:与 dirty 相对应,clean 表示组件当前的状态为干净状态,clean 状态下组件不会执行 build 函数。

 

 

参考资料:

https://juejin.cn/post/7023254324851507214

标签: dart flutter widget
最后更新:2025年9月15日

cywcd

我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

打赏 点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

cywcd

我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

最新 热点 随机
最新 热点 随机
《生化危机》女主手搓AI记忆系统,48小时狂揽7千星!AI的长期记忆终于有解了? 用一条自然语言指令,让AI自动完成了调研、写稿、配音、剪辑全流程 你以为 AI 配音还在拼“像不像”,结果有人已经把“整个语音工作室”开源了 Claude Opus 4.7 上线:编程能力炸裂式跃升,Anthropic 手握更强模型却故意不发布 Gemma 4发布4天即遭"完全越狱",开源AI的安全与自由之争 一个文件让AI写代码不再"翻车":45K星的Karpathy指南火了
Dan Koe:不想打工?用这套方法把兴趣变成收入GitHub 爆火 4 万星项目:MiroFish,到底是 AI 新神话,还是下一代预测引擎DeerFlow 2.0:字节跳动开源的超级智能体框架,让AI研究、编码、创作一气呵成!Claude Code 生态大爆发:这周 GitHub 热点,已经不是工具升级,而是工作方式重写我把 Codex CLI 装上了“外挂大脑”:oh-my-codex 到底有多猛?别再盲下大模型了:用 llmfit 一秒看懂你的电脑到底能跑谁
bootstrap-datetimepicker日期时间选择插件中文说明 架构模式全景图:从单体到云原生的演进与思考 构建高效 AI 工作流的工程化实践 信息系统架构的形与魂:理论、方法与前端实践 Docker 进阶(五):Docker + CI/CD —— 从代码提交到自动部署 互联网思维下,产品的17项关键要素
最近评论
渔夫 发布于 6 个月前(11月05日) 学到了,感谢博主分享
沙拉小王子 发布于 9 年前(11月30日) 适合vue入门者学习,赞一个
沙拉小王子 发布于 9 年前(11月30日) 适合vue入门者学习,赞一个
cywcd 发布于 9 年前(04月27日) 请参考一下这篇文章http://www.jianshu.com/p/fa4460e75cd8
cywcd 发布于 9 年前(04月27日) 请参考一下这篇文章http://www.jianshu.com/p/fa4460e75cd8

COPYRIGHT © 2025 蓝戒博客_智构苍穹-专注于大前端领域技术生态. ALL RIGHTS RESERVED.

京ICP备12026697号-2