浅析 Preact Signals 及实现原理( 五 ) _Preact

这个地方如果传的是个 count 的 signal 对象，那么在点击 button 的时候，这里的 Counter 组件并不会触发 re-render ，如果是个 signal 值，那么它会触发更新。
关于把 Signals 在 JSX 中渲染成文本值，可以直接参考: https://github.com/preactjs/signals/pull/147
这里渲染的原理是 Preact Signal 本身会去劫持原有的 Diff 执行算法:

文章插图
图片
把对应的 signal value 存到 vnode.__np 这个节点属性上面去，并且这里会跳过原有的 diff 算法执行逻辑(这里的 old(value) 执行函数) 。
然后在 diff 完之后的更新的时候，直接去把对应的 signals 值更新到真实的 dom 节点上面去即可:

文章插图
图片
Preact signals 和 hooks 之间关系两者并不互斥，可以一起使用，因为两者所依赖的更新的逻辑不一样。

Preact Signals 对比 Hooks 带来收益
Preact Signals 本身在状态管理上区别于 React Hooks 上的一个点在于: Signals 本身是基于应用的状态图去做数据更新，而 Hooks 本身则是依附于 React 的组件树去进行更新。
本质上，一个应用的状态图比组件树要浅很多，更新状态图造成的组件渲染远远低于更新状态树所产生的渲染性能损耗，具体差异可以参考分别使用 Hooks 和 Signals 的 Devtools Profile 分析: