SolidJS 采用细粒度响应式系统,不使用虚拟 DOM。其核心响应式原语包括:
- createSignal:创建响应式状态,返回 getter 和 setter
javascriptconst [count, setCount] = createSignal(0);
- createEffect:创建响应式副作用,自动追踪依赖
javascriptcreateEffect(() => { console.log(count()); });
- createMemo:创建派生状态,缓存计算结果
javascriptconst doubled = createMemo(() => count() * 2);
- createResource:处理异步数据
javascriptconst [data] = createResource(fetcher);
关键优势:
- 直接 DOM 操作,避免虚拟 DOM diff
- 编译时优化,运行时零开销
- 细粒度更新,只更新变化的节点
- 无需手动依赖声明,自动追踪
与 React 区别:
- React 使用虚拟 DOM + 重新渲染
- SolidJS 使用细粒度响应式 + 直接 DOM 更新
- React 组件每次 props 变化都重新执行
- SolidJS 组件只执行一次,内部响应式更新