Flutter 中 StatelessWidget 与 StatefulWidget 的抉择

前言

在学习 Flutter 中，我们了解到 Widget 有 StatelessWidget 和 StatefulWidget 两种类型。其中 StatefulWidget 对应有交互、需要动态变化视图效果的场景，而 StatelessWidget 则用于处理静态的、无状态的视图展示。下面就对 StatelessWidget 和 StatefulWidget 进行学习和比较，从而更好地理解 Widget，掌握不同类型 Widget 的正确使用时机。

（一）UI 编程范式

首先了解一下在 Flutter 中，如何调整一个控件（Widget）的展示样式，即 UI 编程范式。

在 Android、iOS 或者 JavaScript 开发中，视图开发是命令式的，需要精确地告诉操作系统或浏览器用何种方式去做事情。比如，如果我们想要变更界面的文案，则需要找到具体的文本控件并调用它的控件方法命令，才能完成文字变更。

示例，将文本控件的内容更改为 “Hello World”：

// Android 设置某文本控件展示文案为 Hello World
TextView textView = (TextView) findViewById(R.id.txt);
textView.setText("Hello World");

// iOS 设置某文本控件展示文案为 Hello World
UILabel *label = (UILabel *)[self.view viewWithTag:1234];
label.text = @"Hello World";

// 原生 JavaScript 设置某文本控件展示文案为 Hello World
document.querySelector("#demo").innerHTML = "Hello World!";

与此不同的是，Flutter 的视图开发是声明式的，其核心设计思想就是将视图和数据分离，这与 React 的设计思路完全一致。

对于 Flutter 来说，如果要实现同样的需求，除了设计好 Widget 布局方案之外，还需要提前维护一套文案数据集，并为需要变化的 Widget 绑定数据集中的数据，使 Widget 根据这个数据集完成渲染。

这样看似很麻烦，但是，当需要变更界面的文案时，我们只要改变数据集中的文案数据，并通知 Flutter 框架触发 Widget 的重新渲染即可。比起命令式的视图开发方式需要挨个设置不同组件（Widget）的视觉属性，这种方式要便捷得多。

总结来说，命令式编程强调精准控制过程细节；而声明式编程强调通过意图输出结果整体。对应到 Flutter 中，意图是绑定了组件状态的 State，结果则是重新渲染后的组件。在 Widget 的生命周期内，应用到 State 中的任何更改都将强制 Widget 重新构建。

其中，对于组件完成创建后就无需变更的场景，状态的绑定是可选项。这里“可选”就区分出了 Widget 的两种类型，即：StatelessWidget 不带绑定状态，而 StatefulWidget 带绑定状态。当你所要构建的用户界面不随任何状态信息的变化而变化时，需要选择使用 StatelessWidget，反之则选用 StatefulWidget。前者一般用于静态内容的展示，而后者则用于存在交互反馈的内容呈现中。

（二）StatelessWidget

在 Flutter 中，Widget 采用由父到子、自顶向下的方式进行构建，父 Widget 控制着子 Widget 的显示样式，其样式配置由父 Widget 在构建时提供。

用这种方法构建出的 Widget，有些（比如 Text、Container、Row、Column 等）在创建时，除了这些配置参数之外不依赖与任何其他信息，它们一旦创建成功就不再关心、也不响应任何数据变化进行重绘。在 Flutter 中，这样的 Widget 被称为 StatelessWidget（无状态组件）。

这里有一张 StatelessWidget 的示意图，如下所示：

StatelessWidget 示意图

接下来，我以 Text 的部分源码为例，和你说明 StatelessWidget 的构建过程。

class Text extends StatelessWidget {     
  // 构造方法及属性声明部分
  const Text(this.data, {
    Key key,
    this.textAlign,
    this.textDirection,
    // 其他参数
    ...
  }) : assert(data != null),
     textSpan = null,
     super(key: key);
     
  final String data;
  final TextAlign textAlign;
  final TextDirection textDirection;
  // 其他属性
  ...
  
  @override
  Widget build(BuildContext context) {
    ...
    Widget result = RichText(
       // 初始化配置
       ...
      )
    );
    ...
    return result;
  }
}

可以看到，在构造方法将其属性列表赋值后，build 方法随即将子组件 RichText 通过其属性列表（如文本 data、对齐方式 textAlign、文本展示方向 textDirection 等）初始化后返回，之后 Text 内部不再响应外部数据的变化。

那么，什么场景下应该使用 StatelessWidget 呢？

父 Widget 能够通过初始化参数完全控制其 UI 展示效果，那么就可以使用 StatelessWidget 来设计构造函数接口了。

（三）StatefulWidget

在 Flutter 中有一些 Widget（比如 Image、Checkbox）的展示，除了父 Widget 初始化时传入的静态配置之外，还需要处理用户的交互（比如，用户点击按钮）或其内部数据的变化（比如，网络数据回包），并体现在 UI 上。这些 Widget 创建完成后，还需要关心和响应数据变化来进行重绘。在 Flutter 中，这类 Widget 被称为 StatefulWidget（有状态组件）。StatefulWidget 的示意图，如下所示：

StatefulWidget 示意图

接下来，我以 Image 的部分源码为例，和你说明 StatefulWidget 的构建过程。

class Image extends StatefulWidget {
  // 构造方法及属性声明部分
  const Image({
    Key key,
    @required this.image,
    // 其他参数
  }) : assert(image != null),
       super(key: key);

  final ImageProvider image;
  // 其他属性
  ...
  
  @override
  _ImageState createState() => _ImageState();
  ...
}

class _ImageState extends State<Image> {
  ImageInfo _imageInfo;
  // 其他属性
  ...

  void _handleImageChanged(ImageInfo imageInfo, bool synchronousCall) {
    setState(() {
      _imageInfo = imageInfo;
    });
  }
  ...
  @override
  Widget build(BuildContext context) {
    final RawImage image = RawImage(
      image: _imageInfo?.image,
      // 其他初始化配置
      ...
    );
    return image;
  }
 ...
}

同样，Image 类的构造函数会接受要被这个类使用的属性参数。不同的是，Image 类并没有 build 方法来创建视图，而是通过 createState 方法创建了一个类型为 _ImageState 的 state 对象，然后由这个对象负责视图的构建。

拿 _imageInfo 属性为例，_imageInfo 属性用来给 Widget 加载真实的图片，一旦 State 对象通过 _handleImageChanged 方法监听到 _imageInfo 属性发生变化，就会立即调用 setState 方法通知 Flutter 框架重新构建，更新 UI。

在这个例子中，Image 以一种动态的方式运行：监听变化，更新视图。与 StatelessWidget 通过父 Widget 完全控制 UI 展示不同，StatefulWidget 的父 Widget 仅定义它的初始化状态，而自身视图运行的状态则需要自己处理，并根据处理情况即时更新 UI 展示。

（四）StatefulWidget 不是万金油

这时我们会有疑问，既然 StatefulWidget 不仅可以响应状态变化，又能展示静态 UI，那么 StatelessWidget 这种只能展示静态 UI 的 Widget，还有必要使用吗？

首先，看一下 Widget 的更新机制：

Widget 是不可变的，更新则意味着销毁和重建。StatelessWidget 是静态的，一旦创建则无需更新；而 StatefulWidget 在调用 setState 方法更新数据后，会触发视图的销毁和重建，也将间接地触发其每一个子 Widget 的销毁和重建。

尽管 Flutter 会通过 Element 层最大程度降低对真实渲染视图的修改，但是如果滥用 StatefulWidget，在更新 UI 时，一整个页面所有的 Widget 都会销毁和重建。这样大大降低了渲染性能。

因此，正确评估视图展示需求，避免无谓的 StatefulWidget 使用，是提高 Flutter 应用渲染性能最简单也是最直接的手段。

总结

由于 Widget 采用由父到子、自顶向下的方式进行构建，因此在自定义组件时，我们可以根据父 Widget 是否能通过初始化参数完全控制其 UI 展示效果的基本原则，来选择继承 StatelessWidget 还是 StatefulWidget。