了解 widget 生命周期,对我们开发组件还是很重要的。
今天会把无状态、有状态组件的几个生命周期函数一起过下。
https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html
https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html
无状态组件比较简单就是一个 build 函数,每次外部新状态压入,进行调用。
class TitleWidget extends StatelessWidget { const TitleWidget({super.key, required this.title}); final String title; Widget build(BuildContext context) { return Text(title); } }
当您创建一个statefulWidget时,这将自动创建。
State<CounterWidget> createState() => _CounterWidgetState();
在小部件创建之前和构建方法之前调用
一般用来初始状态数据
int _counter = 0; void initState() { print('initState'); super.initState(); _counter = 10; }
当每个依赖项更改此状态时,调用此方法
在构建小部件的第一次调用initState()之后,也可以立即调用它。
void didUpdateWidget(covariant CounterWidget oldWidget) { super.didUpdateWidget(oldWidget); print('didUpdateWidget'); }
当小部件暂时从小部件树中移除时,将调用此方法。
void deactivate() { print('deactivate'); super.deactivate(); }
当小部件从小部件树中永久移除时
void dispose() { print('dispose'); super.dispose(); }
// ignore_for_file: avoid_print import 'package:flutter/material.dart'; class CounterWidget extends StatefulWidget { const CounterWidget({super.key, required this.title}); final String title; // 1. 创建状态 State<CounterWidget> createState() => _CounterWidgetState(); } class _CounterWidgetState extends State<CounterWidget> { int _counter = 0; // 2. 初始化状态 // 在小部件创建之前和构建方法之前调用 void initState() { print('initState'); super.initState(); _counter = 10; } // 3. 当每个依赖项更改此状态时,调用此方法 // 在构建小部件的第一次调用initState()之后,也可以立即调用它。 void didChangeDependencies() { print('didChangeDependencies'); super.didChangeDependencies(); } // 4. 当小部件重新构建时,将调用此方法。 // 这个用于取消订阅在initState()中订阅的旧对象, // 并在更新的小部件配置需要替换对象时订阅新对象。 void didUpdateWidget(covariant CounterWidget oldWidget) { super.didUpdateWidget(oldWidget); print('didUpdateWidget'); } // 5. 停用 // 当小部件暂时从小部件树中移除时,将调用此方法。 void deactivate() { print('deactivate'); super.deactivate(); } // 6. 释放资源 // 当小部件从小部件树中永久移除时 void dispose() { print('dispose'); super.dispose(); } Widget build(BuildContext context) { print('build'); return Column( children: [ // 标题 Text(widget.title), // 计数 ElevatedButton( onPressed: () { setState(() { _counter++; }); }, child: Text('counter > $_counter'), ), ], ); } }
https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_widget_life_cycle
了解小部件的生命周期非常重要,这样你就可以编写高效且节省内存的代码。通过了解生命周期,你可以避免创建不必要的对象和资源。
尽可能使用无状态小部件。无状态小部件比有状态小部件更高效和节省内存。
只有在需要更新小部件的状态时才使用有状态小部件。
尽量避免不必要地调用 setState()
。调用 setState()
会导致 build()
方法再次被调用,这可能会造成额外的开销。
当您的小部件不再需要时,请处理掉它们使用的任何资源。这将有助于防止内存泄漏。
感谢阅读本文
如果我有什么错?请在评论中让我知道。我很乐意改进。
© 猫哥 ducafecat.com
end
Copyright 2023 ducafecat. All rights reserved.
微信: ducafecat, line: ducafecat,京ICP备2021009050号-3