add Signals on Flutter

This commit is contained in:
thislight 2023-12-09 20:48:27 +08:00
parent b89e968f58
commit 98a99dc80d
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E

View file

@ -0,0 +1,46 @@
---
title: Flutter, Dart和Signal范式
date: 2023-12-09 20:38:24
tags:
- Flutter
- Dart
- 前端开发
---
最近看到很多在Flutter上实现Signal范式的项目其实我自己也试了一下。感想是Dart缺少太多语法特性了……真正的Signal范式需要很多胶水代码在JS上这些胶水代码都是用代码生成器生成的但是Dart和Flutter让这个生成器不是那么的好写或者没法方便的用自带的特性做类似的功能。
<!--more-->
比如说最关键的自动依赖跟踪这是实现这个Signals的项目都有一大堆胶水代码的关键原因。举个JSX的例子
```tsx
<Hello name={isWorld() ? "world" : name}/>
```
会被转译成类似下面的JS代码。
```js
createComponent(Hello, {
get name() {
return (isWorld() ? "world": name);
}
})
```
这样才能做到两个功能:
1. lazy evaluation只有从props里面获取name时才会evaluate相应表达式
2. 自动依赖跟踪通过模拟一个dynamic-scope variablelazy evaluation可以让signal在被访问时获得这个变量的值来跟踪依赖。这个是最简单而且计算最少的实现方法时间复杂度可以做到常数级
但是在Dart和Flutter Widget里面你很难处理成这样。
如果你通过InheritWidget这种来做依赖跟踪它需要在Element树向上查找这个性能损失太大了。Dart也没有好用的proxy范式所以很难简单的实现lazy evaluation。如果你的参数收Signal对象那也是胶水代码的重要来源。
Getx虽然很“脏”但是它确实充分发展了Dart和Flutter提供的东西。
如果要在Flutter上实现Signal范式我估计有几个是必须的
- 计算类型
- inline object或者inline class
- 不再围绕Widget设计APISignal系统可以提供的粒度其实比现在的Widget更小它完全可以直接控制Element