蓝戒博客

  • 首页
  • 研发说
  • 架构论
  • 效能录
  • AI谈
  • 随笔集
智构苍穹
AI为翼,架构为骨,文化为魂,实践探新境,价值筑长青。
  1. 首页
  2. 研发说
  3. 正文

Flutter系列之组件的生命周期

2022年10月29日 3795点热度 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 中对话未来。

最新 热点 随机
最新 热点 随机
npm 安全更新:把握令牌变更与发布体系的迁移参考指南 TresJS:用 Vue 构建现代化交互式 3D 体验 i18n 高效实现方案:前端国际化神器安利一波 前端国际化 i18n 实践:从项目到组件库的全链路方案 GEO(生成引擎优化)完整指南:AI 搜索时代的企业内容新机会 NativeScript:用 JavaScript / TypeScript 构建真正的原生应用
前端开源工具 PinMe:极简部署体验分享大屏适配的核心痛点与一行 autofit 解决方案markdown-exit:现代化的 Markdown 解析工具Lerna + Monorepo:前端多仓库管理的最佳实践CrewAI:基于角色协作的 AI Agent 团队框架浅析2025 最推荐的 uni-app 技术栈:unibest + uView Pro 高效开发全攻略
LangChain:AI Agent 开发框架的全面解析 vue中使用v-for循环,动态绑定失效解决方法,循环列表显示/隐藏单独控制实例 jquery对象与js对象的相互转换方法 向IE6说再见,六大理由! 理财攻略:A轮、B轮、C轮融资、VC、PE、IPO概念解析 flex布局及其兼容解决方案
最近评论
渔夫 发布于 1 个月前(11月05日) 学到了,感谢博主分享
沙拉小王子 发布于 8 年前(11月30日) 适合vue入门者学习,赞一个
沙拉小王子 发布于 8 年前(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