为什么说useSignal()是Web框架的未来

内容列表

什么是 useSignal

一个简单的 react 组件是下面这样的:它使用了useState这个hooks钩子函数

useSignal()就是 state 和 setState 的改良版本,它写起来是这样的:

虽然看起来没什么特别的,只是省略了一个 setState,但是两者的原理其实完全不同。Signals 和 State 之间的主要区别在于 Signals 返回一个 getter 和一个 setter ,而非响应式系统返回其值(和一个 setter )。

Signals 是可响应的!就意味着它们会追踪对状态感兴趣的(订阅)人,如果状态发生了变化,就通知订阅者状态发生了变化。要具有响应性,Signals 必须收集谁对 Signals 的值感兴趣(订阅)。他们通过观察在哪些上下文中调用 state-getter 来获得这些信息。通过从 getter 获取值的行为,可以告诉 Signals 这个地方对其值感兴趣。如果值发生更改,则需要使该位置发生重新计算。换句话说,调用 getter 将创建订阅。

综上所述 Signals 其实是一个订阅发布系统,只是订阅这个步骤是自动实现的,这样的好处是不需要diff,也不需要死去活来的不断调用 App,减少开销。

它其实有点像vue的ref或者react的useRef;但是实际上:useRef() 的使用与 useSignal() 完全相同,用于传递对 state 的引用,而不是 state 本身。useRef() 缺少的是订阅跟踪和通知。

相关

DOM-节点集合

2018-05-17

当从文档树中选取成组的节点或者使用预定义的节点集合时,这些节点都是放在 NodeList 或者一个 HTMLCollecton 之中,而不是一个数组(Array)中。

了解更多

网络通信关键概念

2018-06-18

计算机网络是通过通信设备与线路将地理上分散并且具有独立功能的计算机系统连接在一起,并由功能完善的软件来控制,进而实现资源共享的系统。从物理组成上来看,计算机网络包括硬件、软件和协议三大部分。计算机网络中结点间相互通信是由控制信息传送的网络协议及其他相应的网络软件共同实现的。在计算机网络通信中,有部分关键性概念需要理解透彻,在此做一总结。

了解更多

Web 前端调试工具:SourceMap 文件

2021-11-28

Web 前端项目在生产环境发布的代码是经过混淆和压缩的,如何调试则成为了一个难题,SourceMap 文件则是一个解决该问题时可以利用的很好的工具。

了解更多