SuperAPI AI 工具集

solid-core-reactivity-model

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:帮助理解与调试 SolidJS 的响应式核心模型,解释组件为何只执行一次,避免把 React 的思维模型套用到 SolidJS 上。

主要能力:

  • 心智模型:SolidJS 没有虚拟 DOM,组件只运行一次以搭建响应式依赖图,只有响应式表达式(effect、memo、JSX 绑定)在依赖变化时重新执行,DOM 通过绑定直接更新,无 diff、无协调、无重渲染。
  • 追踪范围:createEffect、createMemo、createRenderEffect、createComputed、JSX 表达式会追踪并重执行;组件函数体、事件处理器、onMount 不追踪(组件体只运行一次,事件按需运行,onMount 挂载后运行一次);untrack 显式抑制追踪。
  • 依赖图:Signal 是源,Memo 是派生节点,Effect 是汇点、绝不产生响应式值;在追踪作用域内调用 getter 时自动追踪依赖。
  • 执行模型差异:SolidJS 1.x 信号传播同步,可用 batch() 延迟;2.x 默认微任务批处理,读取需在 flush 后反映,可用 flush() 强制立即传播;onMount 在 2.x 改名为 onSettled 且可返回清理函数;异步支持从 createResource 转为计算可直接返回 Promise。
  • JSX 编译:编译为直接 DOM 创建调用加细粒度响应式绑定,每个 {表达式} 成为独立绑定,只更新对应节点。
  • 所有权树:计算由创建它的作用域拥有,作用域销毁时子计算自动清理;createRoot 创建新根且内部不自动销毁,getOwner 取当前所有者,runWithOwner 在指定所有者下执行,onCleanup 注册清理。在组件树外创建响应式计算时须用 createRoot,异步回调会丢失所有者,需用 runWithOwner 恢复。

关键限制与常见错误:不要假设组件会重渲染;不要在追踪作用域外解构 props 或信号结果,否则会固定快照破坏响应式;不要使用依赖数组;不要从 effect 返回清理函数,应使用 onCleanup();不要在 effect 中条件性访问信号或在提前返回后访问,否则追踪不稳定;信号 getter 必须函数调用 count(),props 应直接访问或使用 splitProps/mergeProps。

参考文档包含 methods.md、examples.md、anti-patterns.md,官方来源为 SolidJS 文档与 GitHub releases。