什麽是 StatefulWidget？

• 他是一个具备 State（状态）的元件，里面所有可变状态的子元件的状态都会保留在 Staatefulwidget 所创立的 State 里面。
• 目的：可以用来更新画面，当你的画面需要变动的话，你可能就须使用 stateFulWidget。
• 影片简介 => https://youtu.be/AqCMFXEmf3w
• 官网 => https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html

StateFulWidget 的生命周期

1. createState()

• 当你创建一个 statefulWidget 的时候，会看到一个 createState()，这边他就是开始建立状态。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

2. mounted is true

• 底层的 flutter 会将 mounted 设定为 true，这代表他已经将 state 分配给你的子元件了。
• 你可以在 mounted == true 的情况下使用 setState() 来更新画面。因为这个参数是用来确保 State 存在 setState()，也就是说，在 mounted == true 的情况才可以使用 setState()

3. initState()

• 只会调用一次，初始化，并要求要有 super.initState()。
• 这边可以用来初始化一些参数、controlle 的 listener、stream.listen() 等等..

  @override
 void initState() {
   super.initState();
   // TODO
 }

4. didChangeDependencies()

• 子元件依赖於更新的 InheritedWidget 会被调用。
• 注意：initState 的 function 不一定会在全部执行完成才会触发这个方法，有的时候 didChangeDependencies 被触发时， initState() 里面的方法还未全部执行完成。

5. build()

• 画面 UI
• 必须回传一个 Widget

6.didUpdateWidget(Widget oldWidget)

• 只要在父元件中调用 setState()，子元件的的 didUpdateWidget() 就一定会被触发，不管父元件传递给子元件的建构子参数有没有变化。

7. setState()

• 它用於通知 Framework 数据已更改，此时 build() 里面的 context 会重新建构元件 。
• 便宜，不吃效能。因为他里面不能使用 async 的方法。

8. deactivate()

• 当页面切换时，会触发，此时 State 在视图树中的位置发生了变化，需要先暂时移除後添加。

9. destory()

• 将资源释放。而在呼叫这个方法之前，会先呼叫 deactivate()。

10. mounted is false

• 底层的 flutter 会将 mounted 设定为 false，这代表他已经将 state 从子元件里面移开了。
• 在 mounted == false 的情况下使用 setState() 会喷 ERROR。

什麽是 StatelessWidget？

• 无状态的元件，通常是纯画面。
• 影片简介 => https://youtu.be/wE7khGHVkYY
• 官网介绍 => https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html

Flutter 的 Widget 写法有两种

第一种 - 使用 function 当作 Widget

Widget myWidget(){
    return Text('title');
} 

第二种 - 使用 class 当作 Widget

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('title');
  }
}

差异

由此图可知，如果写成 class 可以透过 flutter inspector 看到自己的 class 名称(MyWidget)，如果是使用 function 的方式的话，只会看到Text。

怎麽选择？

就看你的习惯是什麽了～只要好阅读，都是好方法。