我们使用一个第三方库，不应只看有没有名气，star 多不多，功能强不强大，库的实现原理是否高大上，更应该看它
-
解决了什么问题
-
是否符合我们的项目需求
-
有没有带来新问题
Signal 简介
基于 preactjs.com/blog/signal... 实现了 dart 版。
主打最大的优势是 高性能的颗粒度更新。
Preact Signals
Preact Signals 是 Preact 团队（React 的轻量替代框架）推出的一种 响应式状态管理机制，核心思想是用极小代价实现"自动追踪依赖 + 精准更新"。
数据处理上的细粒度更新
我对 signals.dart 一直有误解，从他的宣传上，以为他在 flutter ui 上有什么细粒度更新。
郭神之前有篇文章已经介绍了 signal 的原理：guoshuyu.cn/home/wx/Flu... 。
从 signal 官方的 例子 ：github.com/rodydavis/s... 也可以看出，其在 ui 上没有什么细粒度更新，本质上还是 setState 触发 Widget 树的 build。
signal 的细粒度是处理数据时的细粒度。flutter 上还是一样的 setState，flutter Widget 上也并不需要什么细粒度更新，本身就足够高效。
类似于 什么 Consumer/ ProviderBuilder 的局部更新组件其实都是没必要的。直接 setState 并没什么性能丢失。如果真的很频繁，直接用系统自带的 ValueNotifierBuilder
官方例子：
dart
class _CounterExampleState extends State<CounterExample> with SignalsMixin {
late final Signal<int> counter = createSignal(0);
void _incrementCounter() {
counter.value++;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Counter'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}和直接用 ValueNotitier 并没有啥区别，只是 signal 内部帮你自动加了 counter.addListener 而已。
dart
class _CounterExampleState2 extends State<CounterExample> {
late final ValueNotifier<int> counter = ValueNotifier(0);
@override
void initState() {
super.initState();
counter.addListener(() {
setState(() {});
});
}
void _incrementCounter() {
counter.value++;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Counter'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$counter',
style: Theme.*of*(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.*add*),
),
);
}
}signals.dart 解决的痛点
所以 signals.dart 最大的价值就是处理数据的高效：
dart
final a = createSignal(1);
final b = createSignal(2);
final sum = createComputed(() => a.value + b.value);
final doubled = createComputed(() => sum.value * 2);这种写法就是每个值都是lazy 响应式的。个人观点，我看不出大的优势，我找不到我处理什么数据时什么时候真的需要这种lazy 响应式的场景。这种写法反而不易于阅读和维护。并且绑定了 signal 库，以后要抽成基础组件库也不方便。
总结
所以 signal 主打的数据上的细粒度功能，真的戳到你的痛点了吗？