Flutter 从浅入深理解 StatefulWidget 和 StatelessWidget

秒速五厘米 2022-03-22 10:15 213阅读 0赞

**相关文章**  
[Flutter 环境搭建以及填坑指南（Win10 系统且已有 Android 开发环境 ）][Flutter _Win10 _ Android _]  
[Flutter 入门实现 ListView 列表页面以及收藏页面][Flutter _ ListView]  
[Flutter Widget 静态布局实战][Flutter Widget]  
[Flutter 容器类 Widget][Flutter _ Widget]

## 简介 ##

在 `Flutter` 中，一切皆 `widget`。  
那么什么是 `widget` 呢？

> Widget 是 Flutter 功能的抽象描述，是视图的配置信息，同样也是数据的映射，是 Flutter 开发框架中最基本的概念。《引自极客时间-Flutter核心技术与实战》

从`Android`开发的角度来看，`widget`类似于 `Android` 中的 `View`

在`Android`中 `View`是最小的`UI`单位，`widget` 则是 `Flutter` 中最小的 `UI` 单位。

![Widget][]  
图片引自：[What is Flutter?][What is Flutter]

从上图可看出 `Widget` 主要有两种类型：`StatelessWidget` 和 `StatefulWidget`。  
那么这两个 `widget` 有什么区别呢？

二者的区别：**有无状态管理**。

`StatelessWidget` 中不需要管理`Widget`内部的状态。而 `StatefulWidget`中是需要管理`Widget`内部的状态，通过是通过`setState`来管理内部状态。

什么是**状态管理**呢？  
我的理解是**UI需要跟随用户的输入而进行改变**。

## Demo 示例解析 ##

我们可以查看官方的**计数器Demo**，`MyApp`只需要承载`MyHomePage`，除此之外**用户和UI没有直接的交互**，因此这里使用`StatelessWidget`是**非常合适**的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]  
再来看**计数器Demo**中点击按钮，`计数器+1`的代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]  
`MyHomePage`中需要根据**用户和UI直接的交互，改变UI的值**，因此这里使用`StatefulWidget`是**非常合适**的。

为什么上面的描述我会用**非常合适**来形容呢？  
因为`StatefulWidget`也能实现`StateflessWidget`的功能。  
既然`StateflessWidget`是可被替代的，那么他的作用是什么呢？

通过上面的分析，我们知道二者的区别也就是`StatefulWidget`能通过`setState()`来改变`widget`的状态  
那么我们从源码去找找，看看能找出`StateflessWidget`存在的意义吗？

## 源码分析`StateflessWidget`存在的意义 ##

查看`StatelessWidget，StatefulWidget`源码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]  
源码中重写的内容，确实和我们在创建`StatelessWidget，StatefulWidget`是一样的。

那么接着往下查看，  
找到了`StatefulWidget`的`State`抽象类中`setState`方法，发现了`markNeedsBuild`方法  
这个方法的作用是：将`element`标记为脏元素，并将其添加到全局的`widget`中，调用了`scheduleBuildFor`方法在下一帧中重建。。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]  
上面的源码出现了新的内容`element`，这又是什么东东呢？  
仔细回看上面`StatelessWidget，StatefulWidget`的源码，发现二者都会有一个方法，如下：

/// Creates a [StatefulElement] to manage this widget's location in the tree.
    ///
    /// It is uncommon for subclasses to override this method.
    
    /// StatefulWidget
    @override
    StatefulElement createElement() => StatefulElement(this);
    
    /// StatelessWidget
    @override
    StatelessElement createElement() => StatelessElement(this);

通过注释也可以了解到，这里的`Element`是用于管理在这个`Widget`范围下的所有`widget`，（Flutter 中万物皆widget，所以这个描述没毛病）。

点击深入源码发现`StatefulElement 、StatelessElement`都继承了`ComponentElement`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]  
通过上面的注释我们可以了解到  
为了和`RenderObjectElement`区分开，`ComponentElement`并不是直接创建`RenderObject`，而是通过其他 `Element`间接创建的。

这里又出现新的内容：`RenderObject`，这又是个什么东东？  
`RenderObject`在源码中的第一个注释是：`An object in the render tree.`也就是渲染视图树上的一个对象。  
在众多的注释中还说明了`RenderObject`是负责`layout and paint protocols`，也就是布局和绘制。

写到这里，我们不妨回想一下`Widget`和`Element`以及`RenderObject`三者的关系。

`Widget`是负责接收显示各个组件的绘制结果，而具体的绘制是通过创建`RenderObject`去绘制，`RenderObject`是通过`RenderObjectElement`创建，而`RenderObjectElement`又继承了`Element`。

通过这么一顿分析，我们终于知道了`Widget`的生成过程。

回到`setState`的分析，我们发现`StatefulElement`在调用`setState`方法之后，该`widget`下的所有`widget`都会进行重建。

重建是需要耗时，所以`StatefulElement 、StatelessElement`的使用场景就比较明确了。

## 总结： ##

1.  使用`StatelessElement`可提高`UI`的响应效率，优先使用`StatelessElement`，在需要改变状态的情况下使用`StatefulElement`。
2.  `Widget`是负责接收显示各个组件的绘制结果，而具体的绘制是通过创建`RenderObject`去绘制，`RenderObject`是通过`RenderObjectElement`创建，而`RenderObjectElement`又继承了`Element`。

[Flutter _Win10 _ Android _]: https://blog.csdn.net/ITxiaodong/article/details/85809584
[Flutter _ ListView]: https://blog.csdn.net/ITxiaodong/article/details/85951992
[Flutter Widget]: https://blog.csdn.net/ITxiaodong/article/details/86661608
[Flutter _ Widget]: https://blog.csdn.net/ITxiaodong/article/details/86671157
[Widget]: /images/20220322/be495fdd1afc4b948ac5e1f42e6c4401.png
[What is Flutter]: https://flutter.dev/docs/resources/technical-overview
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20220322/c92513a169e2427387ac7cebe16b9190.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20220322/b054844dc313428b9c7f1f7785531594.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]: /images/20220322/5881e2fa895f41bea04669616825bc48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]: /images/20220322/451896de73814bb19d558b05cf96fc04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]: /images/20220322/6705474df5714974ba1588186cf40f9e.png