Flutter 生命周期/渲染原理

[toc]

生命周期

生命周期的基本概念

• 基本概念

  • 生命周期的本质是回到方法（函数），实现这个方法去监听它的生命周期！
  • 让你知道封装好的这个 Widget 它处于什么样的状态了！

• 有什么作用

  • 监听 Widget 的事件
  • 初始化数据
    • 创建数据
    • 发送网络请求
  • 内存管理
    • 销毁数据、销毁监听者
    • 销毁 timer 等等

Widget 的生命周期

• Stateless

  • 1. 构造方法
  • 2. build方法

  class MyHomePage extends StatelessWidget {
    final String title;
    MyHomePage({this.title}) {
        print('构造函数被调用了');
    }
    @override
    Widget build(BuildContext context) {
      print('build 方法被调用');
      return Container();
    }
  }
  

Stateless

从上面的打印我们可以看出，stateless 的构造方法先被调用，之后才调用 build 方法；这里 AS 打印了两次，是因为 AS 本身的 bug，不用理会，我们可以直接用 Xcode 或者命令行运行一下项目，可以看到是打印了一次，大家可以自行操作看下，这里就不多说了。

• Stateful（包含两个对象 Widget、state）

  • Widget 构造方法
  • Widget 的 CreateState 方法
  • State 的构造方法
  • State 的 initState 方法
  • State 的 build 方法
    • 当调用 setState 方法，就会重新调用 build 方法进渲染！
  • 当Widget 销毁的时候，调用 State 的 Dispose 方法

   class MyHomePage extends StatefulWidget {
     final String title;
     MyHomePage({this.title}) {
       print('构造函数被调用了');
     }
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     _MyHomePageState() {
       print('State的构造方法来了！');
     }
     @override
     void initState() {
       print('state 的 init 方法来了！');
       super.initState();
     }
     @override
     Widget build(BuildContext context) {
       print('state 的 build 方法来了！');
       return Center(
         child: Text(widget.title),
       );
     }
     @override
     void dispose() {
       print('state 的Dispose 方法来了！');
       // TODO: implement dispose
       super.dispose();
     }
   }

Stateful.png