Flutter widget生命周期介绍

Flutter中一切皆widget。widget分为无状态和有状态两种，分别是StatelessWidget和StatefulWidget。无状态组件只加载一次，无生命周期。有状态组件可以根据数据来更新，下面介绍一下有状态组件的生命周期。

Flutter的生命周期包含一下几个阶段：

• CreateState 该函数为StatefulWidget创建State时调用的方法，当StatefulWidget被调用时候会立即调用此方法。
• initState 该方法为State初始化调用，因此在此期间可以执行变量的初始化，还可以进行与服务端的初始化，获取到服务端数据之后调用setState方法更新组件。
• didChangeDependencies 该函数是在该组件依赖的全局State发生变化的时候调用。
• build 该函数主要是渲染Widget，会被调用多次，最好只做返回Widget相关的事情。
• reassemble 只要是提供开发阶段使用，只有在debug模式下热重载才会调用。可以添加一些代码来调试。
• didUpdateWidget 此方法在组件重新构建，比如热更新，父组件发生Build时候调用此方法，其次此方法会导致本组件的build方法被调用。

• deactivate 在组件被移除时候调用，如果组件被移除，未被插入到其他组件。那么会调用dispose永久移除。

  
  flutter生命周期.png

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Lifecycle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'lifecycle',
      home: Scaffold(
        appBar: AppBar(
          title: Text('lifecyle'),
        ),
        body: Center(
          child: LifecycleWidget(),
        ),
      ),
    );
  }
}

class LifecycleWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    print('createState');
    return LifecycleState();
  }
}

class LifecycleState extends State<LifecycleWidget> {
  int count = 1;
  String name = 'test';

  @override
  void initState() {
      print('initState');
      super.initState();
  }

  @override
  void didChangeDependencies() {
   print('didchangeDependencies');
    super.didChangeDependencies();
  }

  @override
  void didUpdateWidget(LifecycleWidget oldWidget) {
    count++;
    print('didUpdateWidge  $count');
    super.didUpdateWidget(oldWidget);
  }

  @override
  void deactivate() {
    print('deactivate');
    super.deactivate();
  }

  @override
  void dispose() {
    print('dispose');
    super.dispose();
  }

  @override
  void reassemble() {
    print('reassemble');
    super.reassemble();
  }

  void changeName(){
    setState(() {
      print('set State');
      this.name = 'flutter';
    });
  }


  @override
  Widget build(BuildContext context) {
    print('buid');
    return Column(
      children: <Widget>[
        FlatButton(
          child: Text('$name  $count'),
          onPressed: changeName,
        )
      ],
    );
  }


}

打印结果

I/flutter ( 1431): createState
I/flutter ( 1431): initState
I/flutter ( 1431): didchangeDependencies
I/flutter ( 1431): buid
I/flutter ( 1431): reassemble
I/flutter ( 1431): didUpdateWidge  2
I/flutter ( 1431): buid

点击按钮

I/flutter ( 1604): set State
I/flutter ( 1604): buid

第一次build了两次，正式模式下是不会这样的，build很消耗性能的。

setState会引起build ，而buid会重新更新组件，并且他的子组件也会更新。会调用子组件的didUpdateWidget和build方法。

I/flutter ( 1956): set State
I/flutter ( 1956): buid
I/flutter ( 1956): sub didUpdateWidget
I/flutter ( 1956): sub  build