深挖`React`里程碑之作`AutoStore`与`helux`的渊源

自2023/11开始，经过超500+commits的开发,以近日正式发布里程碑之作AutoStore

AutoStore是一款设计精巧而优雅的现代化响应式状态管理库，提供了强大的状态管理能力，支持响应式、计算属性、异步计算、表单双向绑定、信号组件等功能,为您提供一站式全自动的状态管理。

helux 是腾讯TNTWeb前端团队开源的一款集atom、signal、依赖追踪为一体，支持细粒度响应式更新的状态引擎。

AutoStore的开始分两个阶段

第1个阶段: SpeedForm

• 初步想法

helux大概发布于2023/9左右，也是一款经过超2年不断迭代的精心大作，作者钟正楷在掘金上发布一系列推文，阅读之后，极为惊艳！！！

然后就开始进行陆续试用helux，并期间为helux贡献了一些文档、构建、测试之类的外围工作。经过深入学习和使用，也发现了一些问题，主要是对helux的API设计有自己的想法，觉得不够优雅。

• 因此，我决定基于helux包装一个类似helux-starter之类的封装库，用来简化helux的使用。
• 随着helux-starter代码的增加，我冒出一个就地计算的主意，如下：

const order = sharex({
   price:9.9,
   count:2,
   total:(state)=>state.price * state.count
})

以上order经helux处理后，会创建一个derive对象，然后将派出计算结果写入到原始对象，如下:

order= {
   price:9.9,
   count:2,
   total:18.8
}

但此时的helux还没有开放相应的hook接口来做这件事，因此，在作者[钟正楷]的全力配合下，我们在某个周六花了5个小时将相关的代码加入，并发布正式支持此特性。

• 开发SpeedForm

有了就地计算这个想法后，我进一步开发helux-starter，随着对helux的深入了解，有了更疯狂的的玩法和想法。
就是在一个复杂的JSON对象中，将就地计算发挥到极致，然后与表单进行结合，我想这将大大简化复杂的业务的表单处理，比如下面的orders

const orders = sharex({
    orders:[
        { price:9.9, count:2, total:(state)=>state.price * state.count},
        { price:9.9, count:2, total:(state)=>state.price * state.count}
        { price:9.9, count:2, total:(state)=>state.price * state.count}
    ]
})

一个由响应式核心helx驱动的强大表单引擎开始有了雏形。
因此，我从2023/11开始正式将helux-starter更名为speedform，正式定位为一个基于由响应式核心helx驱动的强大表单引擎。

接下来，SpeedForm的开发进入稳定期，陆续提交300+commits，至2024/5已基本完工，我跟[钟正楷]已经基本完工，也出了初步的文档, 但还不完善以及后续的文档了。

但由于各种原因，停更了一段时间，之间：

• 使用SpeedForm抽空参加了openInula 开源之夏活动，获取了三等奖。
• 开源了LiteTree一款在Vitepress/MarkDown下使用的树组件
• 开源了FlexStyled一款CSS-IN-JS库
• 开源了FlexTree：一款Nodejs下基于左右值的树存储库
• 开源了一些至今没有完工的坑…

第2个阶段: AutoStore

正在SpeedForm进行收宫阶段时，很快就可以正式发布SpeedForm了，风云再起。

• 在打包阶段我发现SpeedForm打包后，产物超过100K,对于一款表单库而言，虽然功能比较多，但是还是不太可接受。经过与作者[钟正楷]的沟通，由于设计原因，并不能支持Tree Shaking之类的技术进行优化。
• 在React组件中开发时，我想实现一个useForm的功能，在组件销毁时将helux创建的sharex销毁，但是helux并不支持，这几乎意味着只能是使用为全局状态库。

基于以上两个主要原因，我开始思考如何解决此问题。

• 我先看了helux的源码，还是否可以进行改造之类的，发现很难，甚至都看不懂。
• 然后我发现helux的底层是由原作者开发的limu，limu是一个不可变数据库，同样功能强大性能强劲。

是否可以直接使用limu来为SpeedForm重构一个响应式核心呢？一方面这相当于重写一个helux，较大的工作量。另一方面，我预想中的响应式核心，并不需要不可变数据。需要为此买单吗？

犹豫之中，SpeedForm停更了好长一段时间。

某一天，我试着想，能不能自己写一个响应式核心，我不需要不可变数据，就想满足SpeedForm的设计。说干就干，没想到，非常顺利，几乎是2-3天时间就将核心基于Proxy的关键代码写完。

经过思考，我决定重构自己的响应式核心，并且SpeedForm重命名为AutoStore，自2024/8开始，由了之前的工作基础，AutoStore的开发非常顺利，终于于近日正式发布了。

AutoStore是一款设计精巧而优雅的现代化响应式状态管理库，提供了强大的状态管理能力，支持响应式、计算属性、异步计算、表单双向绑定、信号组件等功能,为您提供一站式状态管理。

主要特性：

• 响应式核心：基于Proxy实现，数据变化自动触发视图更新。
• 就地计算属性：独有的就地计算特性，可以在状态树中任意位置声明computed属性，计算结果原地写入。
• 依赖自动追踪：自动追踪computed属性的依赖，只有依赖变化时才会重新计算。
• 异步计算：强大的异步计算控制能力，支持超时、重试、取消、倒计时、进度等高级功能。
• 状态变更监听：能监听get/set/delete/insert/update等状态对象和数组的操作监听。
• 信号组件：支持signal信号机制，可以实现细粒度的组件更新。
• 调试与诊断：支持chrome的Redux DevTools Extension调试工具，方便调试状态变化。
• 嵌套状态：支持任意深度的嵌套状态，无需担心状态管理的复杂性。
• 表单绑定：强大而简洁的双向表单绑定，数据收集简单快速。
• 循环依赖：能帮助检测循环依赖减少故障。
• Typescript: 完全支持Typescript，提供完整的类型推断和提示
• 单元测试：提供完整的单元测试覆盖率，保证代码质量。

AutoStore

原文地址：https://blog.csdn.net/wenxuansoft/article/details/143993648

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！