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

embedded/2024/11/25 4:55:00/

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

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

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

AutoStore的开始分两个阶段

第1个阶段: SpeedForm

  • 初步想法

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

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

  • 因此,我决定基于helux包装一个类似helux-starter之类的封装库,用来简化helux的使用。
  • 随着helux-starter代码的增加,我冒出一个就地计算的主意,如下:
const order = sharex({price:9.9,count:2,total:(state)=>state.price * state.count
})

以上orderhelux处理后,会创建一个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信号机制,可以实现细粒度的组件更新。
  • 调试与诊断:支持chromeRedux DevTools Extension调试工具,方便调试状态变化。
  • 嵌套状态:支持任意深度的嵌套状态,无需担心状态管理的复杂性。
  • 表单绑定:强大而简洁的双向表单绑定,数据收集简单快速。
  • 循环依赖:能帮助检测循环依赖减少故障。
  • Typescript: 完全支持Typescript,提供完整的类型推断和提示
  • 单元测试:提供完整的单元测试覆盖率,保证代码质量。

AutoStore


http://www.ppmy.cn/embedded/140291.html

相关文章

Python爬虫:获取1688关键词API接口数据

引言 在当今的电子商务领域,数据的价值不言而喻。对于商家来说,掌握行业关键词趋势是洞察市场动态、优化产品布局的重要手段。1688作为中国领先的B2B电商平台,提供了海量的商品数据。本文将介绍如何使用Python编写爬虫程序,通过A…

【C++】list使用详解

本篇介绍一下list链表的使用,后续也是会对list进行模拟实现的。list是链表里面的双向链表。 1.文档介绍 list - C Referencehttps://legacy.cplusplus.com/reference/list/list/ list中的接口比较多,此处类似,只需要掌握如何正确的使用&am…

Django项目 | 实现登录注册验证电子邮箱

在实现登录验证电子邮箱时,需要确保模型中包含电子邮箱字段 自定义用户模型登录验证电子邮箱实现 1. 模型(Model) 确保自定义用户模型中包含电子邮箱字段。例如: from django.contrib.auth.models import AbstractUser from d…

使用eclipse构建SpringBoot项目

我这里用eclipse2018版本做演示,大家有需要的可以下载Eclipse Downloads | The Eclipse Foundation 1.打开eclipse,选择存放代码的位置 2.选择 file >> new >> project >> 选择springboot文件下的 spring starter project 2.这里选择N…

Oracle-表空间/用户的创建与使用

-- 对象 -- 需要create的都是对象 已学的对象:表 table -- 普通用户 只能查询user开头的数据字典 select tablespace_name from user_tablespaces; -- dba用户才能够查询 select tablespace_name from dba_tablespaces; -- 创建表空间(需要管理员…

自动驾驶系统研发系列—智能驾驶新高度:解析ESS驾驶员转向辅助系统

🌟🌟 欢迎来到我的技术小筑,一个专为技术探索者打造的交流空间。在这里,我们不仅分享代码的智慧,还探讨技术的深度与广度。无论您是资深开发者还是技术新手,这里都有一片属于您的天空。让我们在知识的海洋中一起航行,共同成长,探索技术的无限可能。 🚀 探索专栏:学…

ASCB1系列APP操控末端回路智能微断 物联网断路器 远程控制开关 学校、工厂、农场、商业大楼等可用

安科瑞戴婷 Acrel-Fanny ASCB1系列智能微型断路器是安科瑞电气股份有限公司全新推出的智慧用电产品,产品由智能微型断路器与智能网关两部分组成,可用于对用电线路的关键电气因素,如电压、电流、功率、温度、漏电、能耗等进行实时监测&#x…

《生成式 AI》课程 作业6 大语言模型(LLM)的训练微调 Fine Tuning -- part1

资料来自李宏毅老师《生成式 AI》课程,如有侵权请通知下线 Introduction to Generative AI 2024 Spring 该文档主要介绍了国立台湾大学(NTU)2024 年春季 “生成式人工智能(GenAI)” 课程的作业 5(GenAI HW…