在 Flutter 中，有两类常用的 Widget：

• 无状态的 StatelessWidget
• 有状态的 StatefulWidget

在开发过程中，我们经常需要继承它们两来实现自己的 Widget。

1. StatelessWidget

一个 StatelessWidget 是不能被改变的，比如：Icon、Text等。
如果你的控件一旦显示，就不需要再做任何的变更，那么你应该使用 StatelessWidget。
实现一个自己的 StatelessWidget 很简单。
当你看到下面这个例子?时，你就知道它有多简单了。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _buildMyWidget(context);
}

看，只要在 build() 中返回你的视图就可以了。

2. StatefulWidget

一个 StatefulWidget 是有状态的，可变的。
它可以改变自己的外观，以响应用户的操作或者数据的变化。
比如：CheckBox、Switch..
我们之所以能够改变一个 StatefulWidget，是因为它有一个设置状态的函数：

setState((){
    // 更新状态、数据
})

调用这个函数后，就会触发 StatefulWidget 的视图树重建。
因此，当我们需要一个可交互的，即能根据用户操作或数据变化而改变视图的 Widget 时，那就得用上 StatelessWidget 了。

2.1 自定义 StatefulWidget

现在，来创建一个自定义的 StatefulWidget：

2.1.1.实现一个 StatefulWidget，它是 Widget 的外层。

class FavoriteStatefulWidget extends StatefulWidget {
  // 必须重写 createState()，返回一个 State，它包含了视图和交互逻辑
  @override
  State<StatefulWidget> createState() => _FavoriteStatefulWidgetState();
}

2.1.2.实现一个 State，它提供了真正的 Widget 视图和交互逻辑。

class _FavoriteStatefulWidgetState extends State<FavoriteStatefulWidget> {
  bool _isFavorited = true;
  int _favoriteCount = 41;
 
  void _toggleFavorite() {
    // 通过 setState() 更新数据
    // 组件树就会自动刷新了
    setState(() {
      if (_isFavorited) {
        _favoriteCount -= 1;
        _isFavorited = false;
      } else {
        _favoriteCount += 1;
        _isFavorited = true;
      }
    });
  }
 
  // 重写 build() 函数，构建视图树
  @override
  Widget build(BuildContext context) => Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            padding: EdgeInsets.all(0),
            child: IconButton(
              icon: (_isFavorited ? Icon(Icons.star) : Icon(Icons.star_border)),
              color: Colors.red[500],
              onPressed: _toggleFavorite,
            ),
          ),
          SizedBox(
            width: 18,
            child: Container(
              child: Text('$_favoriteCount'),
            ),
          ),
        ],
      );
}

2.1.3.使用这个自定义的 StatefulWidget 看看效果。

main() => runApp(MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Container(
          color: Colors.white,
          child: Center(
            child: FavoriteStatefulWidget(),
          ),
        ),
      ),
    ));

2.2 State 的生命周期

从上面的例子中可以看到，StatefulWidget 会要求提供一个含有视图树的 State。
既然 State 能够控制一个视图的状态，那它肯定会有一系列的生命周期。

StatefulWidget.createState()
Framework 调用会通过调用 StatefulWidget.createState() 来创建一个 State。

initState()
新创建的 State 会和一个 BuildContext 产生关联，此时认为 State 已经被安装好了，initState() 函数将会被调用。
通常，我们可以重写这个函数，进行初始化操作。

didChangeDependencies()
在 initState() 调用结束后，这个函数会被调用。
事实上，当 State 对象的依赖关系发生变化时，这个函数总会被 Framework 调用。

build()
经过以上步骤，系统认为一个 State 已经准备好了，就会调用 build() 来构建视图。
我们需要在这个函数中，返回一个 Widget。

deactivate()
当 State 被暂时从视图树中移除时，会调用这个函数。
页面切换时，也会调用它，因为此时 State 在视图树中的位置发生了变化，需要先暂时移除后添加。
⚠️注意，重写的时候必须要调用 super.deactivate()。

dispose()
当 State 被永久的从视图树中移除，Framework 会调用该函数。
在销毁前触发，我们可以在这里进行最终的资源释放。
在调用这个函数之前，总会先调用 deactivate()。
⚠️注意，重写的时候必须要调用 super.dispose()。

didUpdateWidget(covariant T oldWidget)
当 widget 的配置发生变化时，会调用这个函数。
比如，Hot-reload 的时候就会调用这个函数。
这个函数调用后，会调用 build()。

setState()
当我需要更新 State 的视图时，需要手动调用这个函数，它会触发 build() 。

原文