SolidJS中Signal如何实现DOM重复渲染?相关技术疑问
先聊Signal触发DOM更新的过程:
你用const [value, setValue] = createSignal(123)创建的就是标准Signal,不存在特殊版本。关键在于框架会在第一次执行App()渲染时,悄悄开启「依赖追踪」。
当App()运行到<div>{value()}</div>时,调用value()读取Signal值的动作会被框架捕捉到——此时框架会把当前这个「负责更新这段DOM的Reaction」(也就是框架内置的DOM更新任务),绑定到这个Signal的依赖列表里。相当于给Signal留了个“联系方式”:“我这段DOM用到了你,你变了就通知我”。
等你调用setValue(456)更新Signal时,Signal会立刻遍历自己的依赖列表,触发所有绑定的Reaction。这里的Reaction就是框架去重新执行App()中用到这个Signal的相关渲染逻辑,生成新的虚拟DOM片段,再和旧的虚拟DOM对比,只把变化的部分同步到真实DOM上——这就是你看到DOM自动更新的原因。
再说说为什么render要传() => <App />:
如果直接传<App />,本质是立刻执行一次App(),得到固定的虚拟DOM对象,之后不管Signal怎么变,框架都没有办法重新生成新的虚拟DOM,自然没法更新。而传一个函数的话,这个函数就相当于一个「UI生成器」:第一次渲染时框架会调用它拿到初始虚拟DOM;之后每当Signal触发Reaction,框架会再次调用这个函数,重新执行App()拿到最新的虚拟DOM,再做diff和DOM更新。简单说,这个函数给了框架一个“重新获取最新UI描述”的入口,保证Signal变化时能拿到新的UI内容。
内容的提问来源于stack exchange,提问作者Stefanie Gauss

