Signal 即将成为JavaScript的一部分

什么是响应性?

在过去的几年中,响应性成为了所有现代前端框架以及React库的核心。

对于不熟悉前端开发的人来说,起初这可能是一个令人困惑的概念,因为它改变了常规的、自上而下的、从调用者到被调用者的顺序工作流。

在响应性范式中,当事情发生变化时,数据会自动更新,下面简单展示一下伪代码:。


effect: console.log(x+2)
x = 2
x = 3

这种方法允许开发者以一种更直观的方式处理数据和UI的更新,使得用户界面能够实时反映底层数据的变化。

根据响应性范式,应用程序可以在变量x发生变化时,无需程序员的特别努力,就能显示NaN、4和5等多种结果。

这里极度简化了这个话题,只是为了给那些对响应性一无所知的人一个大致的了解。

需要指出的是,响应性在前端开发中的许多情况下都非常有用。例如,在显示用户界面时,一个框架可以识别变量何时发生变化以更新用户界面。比如当你展示一个实时的温度计时。

响应性的应用场景远不止于此,几乎所有的前端框架都在使用响应性技术。甚至还有一个响应式的jQuery库。

如何实现响应性?

响应性在实际应用中的一个很好的例子是电子表格。当你在电子表格中基于其他单元格的值输入一个计算公式时,你不需要手动更新计算结果。电子表格应用会自动检测到变化,并更新所有基于修改过的单元格的计算值。

在前端框架中,实现响应性有多种方法。一个著名的例子是使用RxJS,它依赖于观察者(Observables)、订阅者(Subscribers)和主题(Subjects)。如果你经常处理异步数据流,这是一个很棒的库。

在各种框架中,响应性的复杂性对开发者来说是隐藏的。

在React中,你必须明确提供依赖列表:

一旦reactive roomId 或 serverUrl 发生变化,上面的代码片段将会断开当前房间并连接到新的房间。

在Vue中,你甚至不需要提供依赖列表:

Vue会自行判断,如果copy.count发生变化,就应该重新运行代码。

如果我们审视所有主要的框架和库,会发现每个框架和库中的响应性几乎达到了相同的API水平,并且从用户的角度看几乎在做相同的事情。

Signals 的起源如何?

Angular进行的最后一次主要切换到类似的API是在2023年4月3日发布的一份RFC中详细说明的。该文档深入探讨了为什么zone.js的反应性不足,并且Angular必须转向更细粒度的Signals。

并不是说Signals在这方面完全是新事物,更多的是基于研究如何以最佳方式提供响应性的结论。我真的认为应该将Signals的来源归功于Solid。

自从那次重大工作完成以后,它巩固了整个社区对细粒度响应性的采纳。因为从那时起我们知道,几乎每个框架和库都使用几乎相同的响应性模型,但有些用的是tomato,有些则用的是tomato。

推动 Signal 标准化的努力

考虑到这一点,我们可以想象许多可能的结果。一切可能维持现状,每个框架使用自己的响应性模型。在这种情况下,人们实际上在使用不同名称下的相同事物。

另一个情景是,每个人突然使用提供响应性模型的库。到目前为止,这还没有发生,但它仍然是桌面上的一个选项。

第三个,也是最疯狂的情景,将是将 signals 纳入 Ecmascript 本身。这意味着它将成为 JavaScript 本身的一部分。

听起来疯狂吗?

确实。

但一切都在2023年2月一次偶然的 Twitter 聊天中浮出水面:每个人已经有或正在调整响应模型以基于 Signals 的模型。参与讨论的人之一是 Daniel Ehrenberg。

在过去的一年中,你真的不知道是否有什么事情正在酝酿,直到一个月前。

那时,Daniel 在纽约提议了一个名为 queerjs 的演讲,这个名字相当令人费解:

他提供了一个相当引人入胜的描述:

一种选择是通过使 Signals 内置到 JavaScript 中,如 Promises,来稳定生态系统,提高性能和互操作性。但是...最好避免像 Promises 那样的一些陷阱,例如它们始终开启的调度器。

这意味着,Daniel 真的在考虑 Signals 是否应该成为 JavaScript 的一部分!

Signals可能会成为JavaScript的一部分

总的来说,这些都还只是讨论阶段。但是在JavaScript世界里,事情发展迅速。甚至比C++成为一种内存安全的编程语言还要快,这是肯定的!

两天前,Daniel提议在4月的TC39会议上讨论这个主题。这意味着它可能很快就会进入第一阶段!

这是一件大事,因为TC39,即技术委员会39,负责标准化Ecmascript,而一旦某样东西成为标准的一部分,迟早会成为JavaScript的一部分!

当然,这不会像在周五晚上发布到生产环境那么简单。

Signals 可能需要时间才能成为 JavaScript 的标准功能

Signals 要成为 JavaScript 的标准功能,需要经过六个标准化阶段。因此,鉴于 Signals 的复杂性和响应性,这对整个委员会来说是一项艰巨的工作。但同时,它也将吸引包括前端框架开发者在内的许多开发者的关注。

在最佳情况下,他们所有人都应该满意于将来某天切换到 Signals。

但这需要仔细的工作和解决许多难题。例如,标准应该是开放的还是封闭的。

展望未来几年,我们可能会发现每个框架都使用标准的 JavaScript Signals。

这将有助于提高性能、可维护性,并能够将知识从一个框架转移到另一个框架。

许多好处确实可以让这种努力变得值得。

同时,这个过程也可能在任何时候被终止,所以目前一切皆有可能。

然而,我无法停止这种感觉,现在是推动 Signals 前进的绝佳时机。特别是知道从2024年3月18日开始,还有一个Observable/Subscription模型的孵化过程,Signals 可以从中受益。

Signal 提案刚刚发布!

Rob Eisenberg 和 Daniel Ehrenberg 刚刚发布了 Signal 标准的第0阶段提案。

已经有一个 polyfill 可供测试,而这个提案已经秘密开发了8个月!

作者成功地吸引了来自各种框架和库的作者参与:

他们在这里合作,开发了一个可以支持他们核心响应性需求的通用模型。当前的草案基于来自 Angular, Bubble, Ember, FAST, MobX, Preact, Qwik, RxJS, Solid, Starbeam, Svelte, Vue, Wiz 等作者/维护者的设计输入。

以下是一个如何使用 Signals 的例子:

const counter = new Signal.State(0);
const isEven = new Signal.Computed(() => (counter.get() & 1) == 0);
const parity = new Signal.Computed(() => isEven.get() ? "even" : "odd");// 库或框架定义基于其他 Signal 原语的效果
declare function effect(cb: () => void): (() => void);effect(() => element.innerText = parity.get());// 模拟对计数器的外部更新...
setInterval(() => counter.set(counter.get() + 1), 1000);

这是多么令人震惊的简单易用啊!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/707571.html

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

相关文章

最近很火的粘土滤镜被玩坏了,教你用AI绘画SD免费无限制使用,附教程!

大家好,我是阿威。 最近在小红书上,“粘土特效”、“粘土滤镜”异常爆火,被网友玩出了花。 原来,一款海外修图工具——Remini(类似妙鸭相机)上线AI滤镜功能,其中就包括粘土滤镜,非常…

Adobe After Effects AE v24.3.0 解锁版 (视频合成及视频特效制作)

Adobe系列软件安装目录 一、Adobe Photoshop PS 25.6.0 解锁版 (最流行的图像设计软件) 二、Adobe Media Encoder ME v24.3.0 解锁版 (视频和音频编码渲染工具) 三、Adobe Premiere Pro v24.3.0 解锁版 (领先的视频编辑软件) 四、Adobe After Effects AE v24.3.0 解锁版 (视…

【线程创建】——三种方式➕多线程案例练习

02 线程创建 Thread , Runnable , Callable 三种创建方式 Thread class - 继承Thread类 (重点) Runnable接口 - 实现Runnable接口 (重点) Callable接口 - 实现Callable接口 (了解) Thread 类实现 它继承了老祖宗 Object java.lang.Object java.lang.Thread 它实现了 Runnab…

centOS忘记密码的处理办法

1、开机后在出现内核选项时,按 e; 2、在Linux 开头的这行,输入 rd.break 如下图; 3、然后,执行:CtrlX; 4、进入之后是 switch_root:/#输入 mount -o rw,remount /sysroot 以读写方式重新挂载 /s…

镊子蜡烛如何设置止盈止损?Anzo Capital昂首资本盈利收场

通过上一篇文章各位聪明的投资者,都已经知道了什么是镊子蜡烛图以及如何抓住反转进行交易,同时也有很多投资者不知道如何设置止盈止损?今天Anzo Capital昂首资本就和各位投资者一起探讨如何盈利收场。 看跌的镊子模式如何交易?首…

FFmpeg多张图片合成视频?

前言 商家在发布商品的时候,大部分情况下是没有视频的,这样往往会造成商品展示不全等问题,而视频制作又比较麻烦,为了解决此痛点,我们需要提供一键合成视频的功能。 之所以选择 FFmpeg,是因为我们期望后续…

推荐网站(11)Autodraw免费画画自动识别网站

今天我想分享一个神奇的网站,它可以根据你所画的内容自动生成相应的风格,对于那些不太擅长画画的朋友来说简直是个福音,再也不用担心自己不擅长绘画了! 草率的画一只鸟 比如我们选择第一个看看,比我画的好多了 链接直…

前端工程化 - 快速通关 - vue

目录 npm 2.1环境 2.2命令 2.3使用流程 Vite 3.1简介 3.2实战 Vue3 4.1组件化 4.2SFC 4.3Vue工程 4.4基础使用 4.5进阶用法 4.6总结 npm npm 是 nodejs 中进行 包管理 的工具; 下载:Node.js — Run JavaScript Everywhere 2.1环境 ●安…

Springboot整合 Spring Cloud Alibaba Sentinel

1.Sentinel介绍 官方文档地址: https://sentinelguard.io/zh-cn/docs/introduction.html https://github.com/alibaba/Sentinel/wiki/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件,主要以流量为切入…

什么样的技术管理者会被委以重任?

很多技术管理者在职场遭遇瓶颈,长期在中基层管理岗位上徘徊,似乎怎么努力都没有用,难以突破。 而那些被委以重任的技术管理者,往往展现出一些共同的特征,这些特征有助于他们在职业生涯中脱颖而出,今天就聊…

CVE-2022-1015:nf_tables 中整数溢出导致的栈溢出

文章目录 前言漏洞分析漏洞利用OOB ReadOOB Write exploit修复 前言 影响版本:v5.12.0~v5.17.0 测试版本:v5.17.0 编译选项: CONFIG_NF_TABLESy CONFIG_NETFILTER_NETLINKy CONFIG_BINFMT_MISCy CONFIG_USER_NSy CONFIG_E1000y CONFIG_E1…

手机恢复数据:方法与注意事项

手机数据恢复是许多用户在面对意外数据丢失时迫切需要解决的问题。无论是误删文件、系统故障还是其他原因导致的数据丢失,采取正确的恢复方法至关重要。在本文中,我们将探讨手机恢复数据的方法与注意事项,帮助您有效地找回丢失的重要信息。 手…