文章目录SolidJS抛弃虚拟 DOM 的前端框架它怎么工作的关键特性和 React 的区别适合什么场景SolidJS抛弃虚拟 DOM 的前端框架过去十年虚拟 DOM 几乎成了前端框架的标配。React 带火了这个概念Vue、Preact 等纷纷跟进开发者也逐渐把虚拟 DOM 视为性能优化的标准答案。SolidJS 走了另一条路它没有虚拟 DOM而是在编译阶段就把 JSX 转换成真实 DOM 操作运行时只做最小粒度的更新。SolidJS 在 GitHub 上有超过 3.5 万个 Star。这个数字说明相当多的开发者对不用虚拟 DOM这件事感兴趣。它怎么工作的SolidJS 的核心机制是细粒度响应式。写代码时你用createSignal声明状态框架会自动追踪哪些地方用到了这个状态。当状态变化时只有依赖它的那段代码会重新执行整个组件函数不会重新运行。看一个计数器的例子import{createSignal}fromsolid-js;functionCounter(){const[count,setCount]createSignal(0);constdoubleCount()count()*2;return(button onClick{()setCount(cc1)}Increment:{doubleCount()}/button);}这段代码里count是一个信号doubleCount是派生状态。点击按钮后只有doubleCount()这个表达式会重新计算按钮的其余部分保持不动。组件函数本身只执行一次。SolidJS 的编译器会把 JSX 转成高效的 DOM 操作。静态 HTML 被提前提取为模板动态部分通过insert等方法进行局部更新。生成的代码接近手写原生 JavaScript 的水平。关键特性细粒度更新没有虚拟 DOM diff没有组件级重渲染。状态变化直接映射到 DOM 操作跳过了中间的比较步骤。声明式数据流用响应式原语建模状态自动处理依赖追踪。你不需要手动指定哪些组件需要更新。单次渲染模型组件函数只执行一次后续更新由响应式系统驱动。这和 React 的每次状态变化都重新执行整个组件有本质区别。体积小、速度快SolidJS 的核心包体积很小完全支持 tree-shaking。在 JS Framework Benchmark 中它的性能接近原生 JavaScript。现代功能齐全JSX、Fragments、Context、Portals、Suspense、流式 SSR、渐进式水合、错误边界、并发渲染主流框架该有的它都有。调试友好在浏览器开发者工具中你看到的div就是真实的 div不是虚拟节点。这让 DOM 调试变得直观。和 React 的区别SolidJS 用 JSX 写法表面上和 React 很像但底层逻辑完全不同。React 中组件函数在每次状态更新时都会重新执行。useState 返回的值是快照React 通过重新调用组件函数来生成新的虚拟 DOM然后做 diff。这意味着即使你只改了一个计数器整个组件树的相关部分都会重新执行。SolidJS 中组件函数只执行一次。createSignal 返回的是响应式引用状态变化时只有真正读取了这个信号的代码才会重新运行。没有重新执行、没有虚拟 DOM、没有 diff。举个具体场景一个列表组件里有 1000 个条目你修改了其中一个条目的标题。React 会重新执行列表组件函数生成新的虚拟 DOM 树然后找出变化的那个节点。SolidJS 只会更新那一个标题对应的 DOM 文本节点。适合什么场景SolidJS 适合对性能有要求的项目。如果你的应用有大量的动态内容、频繁的状态更新、或者复杂的列表渲染SolidJS 的细粒度更新能带来明显的性能提升。它也适合喜欢 React JSX 语法但对重渲染机制不满的开发者。SolidJS 的心智模型更简单状态变了用到它的地方就更新没用到的就不动。SolidJS 生态在持续发展。社区提供了响应式原语库 solid-primitives、组件库 Kobalte、以及各种构建时工具。TypeScript 支持也很完善配置 JSX 的jsxImportSource指向solid-js即可。快速上手可以用脚手架npx degit solidjs/templates/js my-app cd my-app npm install npm run devSolidJS 的设计哲学是用更少的抽象做更多的事。组件就是函数渲染完全由状态的使用方式决定没有隐藏规则。这种务实的态度加上接近原生的性能表现让它在前端框架的竞争中占据了一个独特的位置。更多的事。组件就是函数渲染完全由状态的使用方式决定没有隐藏规则。这种务实的态度加上接近原生的性能表现让它在前端框架的竞争中占据了一个独特的位置。