蓝戒博客

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

Flutter系列之组件的生命周期

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

最新 热点 随机
最新 热点 随机
前端开发 TanStack 化:从“框架思维”到“能力组合”的工程演进 Docker 进阶(七):容器化体系设计总结与生产落地经验复盘 Docker 进阶(六):生产环境中的 Docker 安全、监控与日志体系 Docker 进阶(五):Docker + CI/CD —— 从代码提交到自动部署 Docker 进阶(四):使用 Docker Swarm 与 Kubernetes 实现容器编排 Docker 进阶(三):深入理解镜像层(Layer)与缓存机制
Workbox:可直接用于生产环境的 Service Worker 利器快速构建项目文档网站:主流文档站点工具选型与对比DiceBear:30+ 风格、完全可定制的开源头像生成解决方案ES2015 → ES2025:JavaScript 十年演进全景回顾与核心 API 总结ECMAScript 2025(ES16)深度解析20 个现代 JavaScript API 深度盘点
《一生的学习》摘录 Node.js 开发利器:深入解析 PM2 与 Nodemon 的区别、使用与最佳实践 Vue2 常见错误及解决方案:从 $attrs is readonly 到组件通信陷阱全解析 Docker 进阶(五):Docker + CI/CD —— 从代码提交到自动部署 js鼠标滑到图片上显示渐变弹出大图 架构师应该具备的专业素养:如何成为一名优秀的系统架构设计师
最近评论
渔夫 发布于 3 个月前(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