深挖`React`里程碑之作`AutoStore`与`helux`的渊源-第2个阶段: AutoStore

时间:2024-11-24 13:38:17

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

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

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

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

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

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

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

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

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

主要特性:

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

AutoStore