前语

做前端的基本上都是要写编写 UI 的，编写 UI 的过程中，总会需求接触到各种组件，那么就需求对组件的生命周期有所了解，否则有些功用可能会出现问题

flutter组件生命周期

flutter最常用的两个组件就是 StatelessWidget 和 StatefulWidget了

StatelessWidget: 为无状况组件，走完 build 即烘托结束，更新内容只能经过从头创立和销毁来更新，合适编写无交互控件

StatefulWidget: 带状况的组件，其拥有组件完整的生命周期，能够在组件创立结束之后，持续更新自己的效果

其生命周期的效果图如下所示:

126164-f40c78e15a496465.webp

createState: 该函数为 StatefulWidget 中创立 State 的办法，当 StatefulWidget 被创立时会立即履行 createState 。

initState: 该函数为 State 初始化调用，因而能够在此期间履行 State 各变量的初始赋值，一起也能够在此期间与服务端交互，获取服务端数据后调用 setState 来设置 State。

这个办法是重写父类的办法，必须调用super，由于父类中会进行一些其他操作；

didChangeDependencies: 该函数是在该组件依赖的 State 产生变化时，即初始化(initState)时，或许是外部传递过来的数据产生改动(InheritedWidget)。例如：父组件在子组件创立时传入参数 name，子组件运用 name，那么当父组件的 name 更新时，子组件的 name也会随之更新，并调用该办法告诉，以便于更新加工数据

build: 主要是回来需求烘托的 Widget ，由于 build 会被调用多次，因而在该函数中只能做回来 Widget 相关逻辑，避免由于履行多次导致状况异常。

didUpdateWidget: 该函数主要是在组件从头构建，比如说热重载，父组件产生 build 的状况下，子组件该办法才会被调用，其次该办法调用之后一定会再调用本组件中的 build 办法。

deactivate: 在组件被移除节点后会被调用，假如该组件被移除节点，然后未被插入到其他节点时，则会持续调用 dispose 开释组件

dispose: 开释组件，移除内存资源

reassemble: 主要是提供开发阶段运用，在 debug 办法下，每次热重载都会调用该函数

下面是 StateFulWidget 的生命周期代码简介，以及经过 widget运用 StatefulWidget 从外侧接纳到的数据（此数据一般为final仅供内部运用），也一起介绍了 结构办法 以及 widget的运用

class HomeTabBar extends StatefulWidget {
  final String title;
  //默许的结构办法，接纳参数有几种办法
  //默许,必须要完成的
  const HomeTabBar({Key? key}) : super(key: key);
  //当咱们有其他结构办法的时分，必须要传入，否则要给定默许值，有三种状况
  //能够选用多个参数的办法传递，和dart学习的时分一样，需求按顺序传递参数
  const HomeTabBar(this.title, {Key? key}) : super(key: key);
  //下面的办法为引荐手段
  //运用目标的办法传递参数，该办法为默许办法，参数前需求加入 require，必须要传递参数
  //注意：假如参数为可选类型 String? title,那么不需求加上 require
  const HomeTabBar({Key? key, required this.title}) : super(key: key);
  //运用目标的办法传递参数，当运用默许值的时分，运用该办法传递，不传运用默许值
  const HomeTabBar({Key? key, title='Marshal'}) : super(key: key);
  @override
  State<HomeTabBar> createState() => _HomeTabBarState();
}
class _HomeTabBarState extends State<HomeTabBar> {
  int age = 10;
  //初始化状况时运用，咱们能够在这里设置state状况
  //也能够恳求网络数据后更新组件状况
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
  //state产生变化时会回调该办法,能够是class
  //也能够是InheritedWidget,即其实践所属的组件(上面那个组件)
  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }
  //父组件产生变化时，会调用该办法，随后调用 build 办法从头烘托，用的少
  @override
  void didUpdateWidget(covariant HomeTabBar oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
  }
  //组件被从父节点移除时回调的办法，假如没插入到其他节点会随后调用dispose完全开释
  //假如该组件被移除，但是仍然被组件关联，则不会随后开释并调用dispose
  @override
  void deactivate() {
    // TODO: implement deactivate
    super.deactivate();
  }
  //完全开释该组件时调用,不建议做本组件的内存操作，能够移除其他组件或许保存的内容
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }
  //debug状况下调用，每次热重载都会回调
  @override
  void reassemble() {
    // TODO: implement reassemble
    super.reassemble();
  }
  @override
  Widget build(BuildContext context) {
      return Text('我是你的粉丝,姓名:${widget.title}，年纪:$age');
  }
}

结构办法和运用状况

前面介绍了结构办法，下面介绍结构办法定义的不同，以及传参的办法，看了就会恍然大悟（传递目标原来是这个样子，刚运用flutter参数时诡异，化为乌有了😂）

const HomeTabBar(this.title, {Key? key}) : super(key: key);
build() {
    //咱们不传递key，默许传递title
    return HomeTabBar("哈哈"); 
}
const HomeTabBar({Key? key, required this.title}) : super(key: key);
build() {
    //咱们不传递key，默许传递title
    return HomeTabBar(title: "哈哈"); 
}
const HomeTabBar({Key? key, title='Marshal'}) : super(key: key);
build() {
    //咱们不传递key，默许传递title
    return HomeTabBar(title: "哈哈"); 
    //也能够不传，为第二种办法的补充版
    return HomeTabBar();
}

最后

了解了声明周期才干更好的运用状况组件

另外这里也介绍了，结构办法在组件中的运用，状况组件结构办法接纳参数传值时分，子状况组件怎样运用传递过来的参数