flutter 局部刷新控件Selector源码实现原理

ops/2025/2/28 23:47:04/

Flutter 中的 Selector 组件是 provider 包提供的一个优化工具,用于在状态管理中仅选择所需数据片段,避免不必要的 Widget 重建。其实现原理基于以下几个关键点:


1. 核心设计目标

  • 选择性重建:仅当特定数据变化时触发 Widget 重建,而非整个状态对象变化时都重建。

  • 性能优化:通过比较数据片段的前后值,避免无关数据变化导致的冗余重建。


2. 实现原理

a. 继承自 StatefulWidget

Selector 是 StatefulWidget,其状态类(如 _SelectorState)负责管理数据监听和重建逻辑。

class Selector<T, R> extends StatefulWidget {final R Function(BuildContext, T) selector;final Widget Function(BuildContext, R, Widget?) builder;final Widget? child;const Selector({ /* 参数初始化 */ });@override_SelectorState<T, R> createState() => _SelectorState<T, R>();
}
b. 状态管理(State)
  • 监听数据变化:通过 Provider.of<T>(context) 获取依赖的状态对象,并监听其变化。

  • 缓存上一次值:保存上一次 selector 函数的结果(_lastValue)。

  • 比较新旧值:在数据变化时,重新计算 selector 结果,并与旧值比较,决定是否重建。

class _SelectorState<T, R> extends State<Selector<T, R>> {R? _lastValue;Widget? _child;@overridevoid didChangeDependencies() {final T model = Provider.of<T>(context);final R newValue = widget.selector(context, model);// 比较新旧值,决定是否重建if (_shouldUpdate(newValue)) {setState(() => _lastValue = newValue);}super.didChangeDependencies();}bool _shouldUpdate(R newValue) {return widget.shouldRebuild?.call(_lastValue, newValue) ?? (newValue != _lastValue);}@overrideWidget build(BuildContext context) {return widget.builder(context, _lastValue as R, _child);}
}
c. 生命周期方法
  • didChangeDependencies:在依赖的 Provider 数据变化时触发,重新计算并比较 selector 结果。

  • setState:仅当数据变化时调用,触发 Widget 重建。


3. 关键机制

a. 选择性监听
  • 使用 selector 函数从状态对象中提取关心的数据片段。例如:

    selector: (context, model) => model.name,
  • 仅当 selector 返回值变化时,才触发 builder 执行。

b. 值比较策略
  • 默认比较:使用 != 操作符比较新旧值(依赖对象覆写 == 和 hashCode)。

  • 自定义比较:通过 shouldRebuild 参数提供自定义逻辑,应对复杂数据结构的比较。

    Selector<Model, String>(shouldRebuild: (prev, next) => prev.length != next.length,// ...
    )
c. 子组件优化(Child Propagation)
  • child 参数:传递静态子组件,避免其随 Selector 重建。在 builder 中复用:

    builder: (context, value, child) {return Column(children: [Text(value), child!],);
    },
    child: const ExpensiveWidget(),

4. 性能优化点

  • 最小化重建范围:仅重建依赖特定数据片段的 Widget。

  • 避免闭包陷阱:将 selector 和 builder 定义为顶层或静态方法,防止不必要的重建。

  • 不可变数据:确保 selector 返回值是不可变的,或正确实现 == 和 hashCode


5. 源码实现总结

  1. 监听依赖:通过 Provider.of 监听状态对象变化。

  2. 提取数据:调用 selector 函数获取关心的数据片段。

  3. 比较值:若新值不同或满足 shouldRebuild 条件,触发重建。

  4. 构建 UI:调用 builder 函数生成 Widget,传递缓存子组件。

通过这一机制,Selector 在复杂的状态管理中显著提升性能,避免不必要的 UI 更新。


http://www.ppmy.cn/ops/162084.html

相关文章

深入探索C#中的async和await:原理、使用方法与最佳实践

在现代软件开发中&#xff0c;异步编程&#xff08;Asynchronous Programming&#xff09;已经成为一个至关重要的技能&#xff0c;特别是在高性能、响应迅速的应用程序开发中。C#作为一种成熟的编程语言&#xff0c;近年来引入了async和await关键词来简化异步编程的写法&#…

DavGo简单部署WebDAV服务

目录 功能特性使用方法1. 下载2. 配置 config.yaml3. 运行服务器4. 可以用来挂载WebDav的软件 反向代理 DavGo 是一个用 Go 语言实现的轻量级 WebDAV 服务器&#xff0c;支持动态配置多个 WebDAV 服务实例&#xff0c;每个实例可以独立设置根目录、认证信息和读写模式。 功能特…

Nginx 配置前端后端服务

在配置Nginx以支持前端和后端服务时&#xff0c;需要了解Nginx的基本配置语法和结构&#xff0c;并依次设置Nginx作为前端静态资源服务器和反向代理服务器以连接后端应用。以下是详细的配置步骤&#xff1a; 一、Nginx基本配置语法和结构 Nginx的配置文件通常位于/etc/nginx/…

【python随手记】——读取文本文件内容转换为json格式

文章目录 前言一、TXT文件转换为JSON数组1.txt文件内容2.python代码3.输出结果 二、TXT文件转换为JSON对象1.txt文件2.python代码3.输出结果 前言 场景&#xff1a;用于读取包含空格分隔数据的TXT文件&#xff0c;并将其转换为结构化JSON文件 一、TXT文件转换为JSON数组 1.tx…

一、图像图像的基本概念

文章目录 一、分辨率概念二、图形图像的区别三、位图和矢量图的区别 一、分辨率概念 图形显示计数中的分辨率概念有三种&#xff0c;即屏幕分辨率、显示分辨率和显卡分辨率。它们既有区别又有着密切的联系&#xff0c;对图形显示的处理有极大的影响。 1.屏幕分辨率 显示器分辨…

释放 Cursor 的全部潜能:快速生成智能 Cursor Rules

释放 Cursor 的全部潜能&#xff1a;使用 PromptCoder 从 package.json 快速生成智能 Cursor Rules 我们将深入探讨如何利用您项目中的 package.json 文件&#xff0c;轻松生成 Cursor Rules&#xff0c;并通过 PromptCoder 这个强大的工具&#xff0c;快速创建高质量的 curso…

再论Spring MVC中Filter和HandlerInterceptor的优先级

在Spring MVC中&#xff0c;Filter和HandlerInterceptor的执行顺序及优先级如下&#xff1a; 1. 执行顺序与优先级 Filter&#xff08;Servlet规范&#xff09;的优先级高于 HandlerInterceptor&#xff08;Spring MVC框架&#xff09;。 请求处理流程&#xff1a; Filter链&a…

minio作为K8S后端存储

docker部署minio mkdir -p /minio/datadocker run -d \-p 9000:9000 \-p 9001:9001 \--name minio \-v /minio/data:/data \-e "MINIO_ROOT_USERjbk" \-e "MINIO_ROOT_PASSWORDjbjbjb123" \quay.io/minio/minio server /data --console-address ":90…