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

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.mzph.cn/bicheng/61802.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《AI大模型开发笔记》——Prompt提示词最佳实践

为什么需要提示词优化 什么是 Prompt enginnering? 提示词:解释一下什么是大语言模型的Prompt enginnering 图1. 什么是Prompt Enginnering? 通过上面ChatGPT的说明,我们可以看到,prompt工程化就是如何写prompt提示…

容器安全检测和渗透测试工具

《Java代码审计》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484219&idx1&sn73564e316a4c9794019f15dd6b3ba9f6&chksmc0e47a67f793f371e9f6a4fbc06e7929cb1480b7320fae34c32563307df3a28aca49d1a4addd&scene21#wechat_redirect Docker-bench-…

使用ENSP实现NAT

一、项目拓扑 二、项目实现 1.路由器AR1配置 进入系统试图 sys将路由器命名为R1 sysname R1关闭信息中心 undo info-center enable进入g0/0/0接口 int g0/0/0将g0/0/0接口IP地址配置为12.12.12.1/30 ip address 12.12.12.1 30进入e0/0/1接口 int g0/0/1将g0/0/1接口IP地址配置…

pnpm:包管理的新星,平替 npm 和 yarn

​ pnpm,一个老牌的 node.js 包管理器,支持 npm 的所有功能,完全足以用来替代 npm。它采用全局存储,每个项目内部使用了硬链接,所以很省空间,安装速度快。 本文介绍下 pnpm 的基本概念,安装、…

【大数据学习 | Spark-Core】Spark的分区器(HashPartitioner和RangePartitioner)

之前学过的kv类型上面的算子 groupby groupByKey reduceBykey sortBy sortByKey join[cogroup left inner right] shuffle的 mapValues keys values flatMapValues 普通算子,管道形式的算子 shuffle的过程是因为数据产生了打乱重分,分组、排序、join等…

计算机网络基础全攻略:探秘网络构建块(1/10)

一、计算机网络基础概念 计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路和通信设备连接起来,在网络操作系统,网络管理软件及网络通信协议的管理和协调下,实现资源共享和信息传递的计算机系统…

游戏陪玩系统开发功能需求分析

电竞游戏陪玩系统是一种专门为游戏玩家提供陪伴、指导和互动服务的平台。这类系统通常通过专业的陪玩师(也称为陪练师)为玩家提供一对一或多对一的游戏陪伴服务,帮助玩家提升游戏技能、享受游戏乐趣,甚至解决游戏中的各种问题。电…

关于SpringBoot集成Kafka

关于Kafka Apache Kafka 是一个分布式流处理平台,广泛用于构建实时数据管道和流应用。它能够处理大量的数据流,具有高吞吐量、可持久化存储、容错性和扩展性等特性。 Kafka一般用作实时数据流处理、消息队列、事件架构驱动等 Kafka的整体架构 ZooKeeper:…

Linux 下的IO模型

一:四种IO模 1.1:阻塞式IO(最简单,最常用,效率最低) 阻塞I/O 模式是最普遍使用的I/O 模式,大部分程序使用的都是阻塞模式的I/O 。 缺省情况下(及系统默认状态)&#xf…

vue3项目部署在阿里云轻量应用服务器上

文章目录 概要整体部署流程技术细节小结 概要 vue3前端项目部署在阿里云轻量服务器 整体部署流程 首先有一个Vue3前端项目和阿里云应用服务器 确保环境准备 如果是新的服务器,在服务器内运行以下命令更新软件包 sudo apt update && sudo apt upgrade -y …

tcpdump交叉编译

TCPDUMP在Libpcap上开发。 首先需要编译libcap。 网上那么多教程,下载地址都只给了一个英文的官网首页, 你尽可以试试,从里面找到下载地址都要费半天时间。 \color{red}网上那么多教程,下载地址都只给了一个英文的官网首页&#…

linux基本命令(1)

1. 文件和目录操作 ls — 列出目录内容 ls # 显示当前目录的文件和目录 ls -l # 显示详细的文件信息(权限、大小、修改时间等) ls -a # 显示所有文件(包括隐藏文件) ls -lh # 显示详细信息并以易读的方式显示文件大小 cd — 改…

KubeSphere 最佳实战:K8s 构建高可用、高性能 Redis 集群实战指南

首发:运维有术。 本指南将逐步引导您完成以下关键任务: 安装 Redis:使用 StatefulSet 部署 Redis。自动或手动配置 Redis 集群:使用命令行工具初始化 Redis 集群。Redis 性能测试:使用 Redis 自带的 Benchmark 工具进…

使用 Python 实现目标检测

目录 简介环境准备数据集模型选择预处理模型加载与推理结果可视化优化与调参部署与应用参考资料 简介 目标检测是计算机视觉中的一个重要任务,旨在识别图像或视频中的特定对象并标注它们的位置。近年来,深度学习技术的发展使得目标检测的准确性和效率…

【人工智能】Python与Scikit-learn的模型选择与调参:用GridSearchCV和RandomizedSearchCV提升模型性能

解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在机器学习建模过程中,模型的表现往往取决于参数的选择与优化。Scikit-learn提供了便捷的工具GridSearchCV和RandomizedSearchCV,帮助我们在参数空间中搜索最佳组合以提升模型表现。本文将从理论和实践两个角度…

Oracle-索引的创建和优化

-- Oracle数据库会为表的主键和包含唯一约束的列自动创建索引 -- 索引种类 -- 普通索引 create index idx_emp_index_sal on emp_index(sal); -- 唯一索引 create unique index uq_idx_emp_index_ename on emp_index(ename); -- 组合索引 create index idx_…

02 python基础 python解释器安装

首先在网站:Welcome to Python.org进行下载安装python 最新的解释器不一定是最好的,最稳定的才一定是最好的;要关注解释器最后维护 的时间。 一、python的安装 python安装的时候一定要在下载勾选好添加path环境 安装的时候尽量选择好自己的安…

视频截断,使用 FFmpeg

使用 FFmpeg 截取视频并去掉 5 分 49 秒后的内容,可以使用以下命令: ffmpeg -i input.mp4 -t 00:05:49 -c:v libx264 -crf 23 -preset medium -c:a aac -b:a 192k output.mp4-i input.mp4: 指定输入视频文件 input.mp4。 -t 00:05:49&#x…

java编程开发基础,正则表达式的使用案例Demo

java编程开发基础,正则表达式的使用案例Demo!实际开发中,经常遇到一些字符串,信息的裁剪和提取操作,正则表达式是经常使用的,下面的案例,可以帮助大家快速的了解和熟悉,正则表达式的使用技巧。 package com…

Windows Pycharm 远程 Spark 开发 PySpark

一、环境版本 环境版本PyCharm2024.1.2 (Professional Edition)Ubuntu Kylin16.04Hadoop3.3.5Hive3.1.3Spark2.4.0 二、Pycharm远程开发 文件-远程-开发 选择 SSH连接,连接虚拟机,选择项目目录即可远程开发