【LiveStates 01】别再手动 watch 了：开启 Flutter “自动追踪” DX 革命

【LiveStates 01】别再手动 watch 了：开启 Flutter "自动追踪" DX 革命

在 Flutter 圈子里，我们似乎已经习惯了一种"显式声明"的痛苦。

不管你用的是 Provider 还是现在如日中天的 Riverpod，你一定写过这种代码：

dart 复制代码

@override
Widget build(BuildContext context, WidgetRef ref) {
  // 声明：必须手动告诉框架我要监听谁
  final name = ref.watch(nameProvider);
  final age = ref.watch(ageProvider);
  final avatar = ref.watch(userAvatarProvider);
  
  // 使用
  return Column(
    children: [
      CircleAvatar(backgroundImage: NetworkImage(avatar)),
      Text('$name ($age)'),
    ],
  );
}

这段代码看起来逻辑清晰，但如果你在深夜写一个拥有 20 个状态变量的复杂页面时，这种"先声明、再使用"的模式简直是灾难。

1. 认知负荷：为什么"显式监听"是个负担？

想象一下，你正在修改一个半年前写的页面。你需要增加一个"等级"展示，你很自然地在代码深处写下了 Text(viewModel.level.value)。

然后，UI 没动。

你猛然想起：哦，我忘了在顶层调用那个该死的 ref.watch 了。

这种**"漏写必出 Bug"**的心理暗示，就是一种持续的认知负荷。开发者不得不分出精力去手动维护一张"依赖清单"。更糟糕的是，如果你为了省事直接 watch 了一个大对象，那么恭喜你，你的整个页面会在任何微小变动时全量重绘，性能优化瞬间化为泡影。

我不禁想问：我都已经在代码里读了这个值了，为什么还要再写一遍代码告诉框架我在读它？

2. "触碰即追踪"： live_states 的魔法

这就是我做 live_states 的原因。我希望实现一种"隐式追踪"的体验------只要你碰了数据，我就自动帮你订阅。

看一眼 live_states 下的写法：

dart 复制代码

@override
Widget build(BuildContext context, UserVM viewModel) {
  return Scaffold(
    body: Column(
      children: [
        const HeavyHeader(), // 静态组件，永不重绘
        LiveScope.free(
          builder: (context, _) => Text(viewModel.name.value), // 触碰 .value 的瞬间，追踪已完成
        ),
      ],
    ),
  );
}

没有 watch，没有 ref，没有冗长的依赖声明。

底层发生了什么？ live_states 利用了 Dart 的 Zone 机制。你可以把 LiveScope 想象成一个带有"电磁场"的区域。当 builder 函数在里面运行时，任何对 LiveData.value 的访问都会触发一次"握手"。

框架会说："嘿，我知道你在读这个名字，我会把你的这块 UI 登记在册。"

这种体验就像是：你不再需要手动给每一个灯泡接线，你只需要把灯泡拧进去，电流会自动感知并接通。

3. 手术刀级别的局部刷新（Surgical Rebuilds）

在传统方案中，为了实现局部刷新，我们往往要付出高昂的代价：你要么得拆分出无数个微小的 StatelessWidget，要么得忍受 Consumer 或 Selector 带来的多层嵌套。

在 live_states 里，局部刷新是手术刀级的，而且代码极其优雅。

你会发现，你可以非常随意地在 Widget 树的任何位置贴上一个 LiveScope.free。它像是一张"性能补丁"，精准地包裹住那块会动的 UI。

4. 当"计算属性"遇上"自动拦截"

业务逻辑里最麻烦的往往是派生状态。比如：购物车里只有总额超过 100 块才显示"包邮"。

在其他框架里，totalPrice 每次变动（哪怕是从 101 变到 105），你的"包邮"图标都会跟着重绘。

live_states 的 LiveCompute 解决了这个问题：

dart 复制代码

// 只有"是否包邮"的布尔值发生变化时，UI 才会收到通知
late final isFreeShipping = LiveCompute<bool>(owner, () => totalPrice.value > 100);

它不仅会自动追踪 totalPrice，还会智能拦截。如果计算结果没变，它就会把刷新信号拦下来。这种"结果导向"的通知，才是高性能 App 该有的样子。

5. 结语：让状态管理回归本质

状态管理不应该是一门需要研读几百页文档的"玄学"，它也不应该成为样板代码的温床。

它的本质只有两件事：数据在哪，以及谁在用它。

live_states 想做的，就是利用 Dart 原生的强悍特性，把这两件事做透明。如果你也厌倦了在 ref.watch 的清单里迷失自我，不妨试试这种"所见即所得"的快感。

下一篇预告： 《【LiveStates 02】Zones 不止于异常捕获：揭秘 LiveStates 自动追踪黑科技》。