乐闻世界logo
搜索文章和话题

SolidJS 响应式系统的工作原理是什么?

2月21日 15:22

SolidJS 采用细粒度响应式系统,不使用虚拟 DOM。其核心响应式原语包括:

  1. createSignal:创建响应式状态,返回 getter 和 setter
javascript
const [count, setCount] = createSignal(0);
  1. createEffect:创建响应式副作用,自动追踪依赖
javascript
createEffect(() => { console.log(count()); });
  1. createMemo:创建派生状态,缓存计算结果
javascript
const doubled = createMemo(() => count() * 2);
  1. createResource:处理异步数据
javascript
const [data] = createResource(fetcher);

关键优势

  • 直接 DOM 操作,避免虚拟 DOM diff
  • 编译时优化,运行时零开销
  • 细粒度更新,只更新变化的节点
  • 无需手动依赖声明,自动追踪

与 React 区别

  • React 使用虚拟 DOM + 重新渲染
  • SolidJS 使用细粒度响应式 + 直接 DOM 更新
  • React 组件每次 props 变化都重新执行
  • SolidJS 组件只执行一次,内部响应式更新
标签:SolidJS