Radi 前端框架没有虚拟 DOM更新为什么还这么快【免费下载链接】radiTiny (in size) front-end framework with no extra browser re-flows项目地址: https://gitcode.com/gh_mirrors/ra/radi如果你写过 React 项目大概率遇到过这种情况一个千行表格点击某一行触发 state 变化框架把整棵组件树重新 diff 一遍大量没变的 DOM 节点也跟着走一次调度。Radi 是一个用原生 DOM 事件驱动的微型 React JSX 运行时它不做虚拟 DOM 对比组件只执行一次状态放在闭包里需要更新时调用update(node)派发一个原生的update事件只有读取过数据的响应式函数会重新求值。适合想控制渲染开销、又不想完全离开 JSX 写法的工程师。组件为什么只跑一次Radi 的组件就是普通函数挂载时执行一次之后状态靠闭包变量保存不靠重新执行组件函数。这是它和 React/Preact 最直观的差异官方 README 里的表格把两者摆在一起Radi 的更新机制一栏写的是 Native DOM events而不是 Scheduler。实现上src/client.ts里维护了一个 connect 队列组件挂载时通过队列调度构建任务src/signal.ts则提供了createAbortSignal之类的工具让监听器跟着元素的生命周期自动清理。组件进出文档时会收到connect/disconnect事件写法上和一个自定义元素的宿主很像。响应式表达式是怎么工作的在 Radi 里JSX 中任何被包成函数的表达式都是响应式的。比如span{() count}/span当调用update(ancestor)时这些函数会重新执行只有输出真正变化了的地方才会触碰 DOM。静态文本永远不会被重算这也是 README 强调的 no extra browser re-flows 的由来——不存在重渲染整个组件再 diff 出差异这一步。属性也可以写成响应式函数例如input value{() inputValue} /。对昂贵子树还可以用memo(fn, shouldSkip)在数据没变时直接跳过求值这个 API 在src/client.ts中有对应实现测试见src/tests/memo-props.test.tsx。从安装到跑通第一个计数器Radi 支持 Deno 和 npm 两种安装方式仓库自带的 playground 就是最小示例的完整形态。安装后用createRoot把 JSX 挂到页面上import { createRoot, update } from radi; function App() { let count 0; const root ( button onclick{() { count; update(root); }} 点击 {() count} 次 /button ); return root; } createRoot(document.getElementById(app)!).render(App /);TypeScript 侧把jsx设为react-jsx、jsxImportSource指向radi即可启用自动运行时配置说明写在 README 的 TypeScript JSX Configuration 一节。仓库内想看更完整的用法playground/full.tsx演示了 channel 主题、keyed 列表和 Suspense 的组合playground/table.tsx则是大表格场景。跑测试用deno task test任务定义在 deno.json。列表、异步和 SSR 三个进阶点大列表是 Radi 的典型受益场景。createList配合createKey做带 key 的协调行数据变化时框架按 key 复用已有 DOM而不是整表重建。src/tests/keyed-table-large.test.tsx和non-keyed-table-large.test.tsx分别覆盖了这两种路径src/bench/table/下还有 append、swap、update 等与 React、Preact、Lit 对比的基准。异步组件直接写async function返回 Promise 即可外层用Suspense fallback{...}提供加载态也可以手动调用suspend(this)/unsuspend(this)控制时机playground/async.tsx是一个完整示例。服务端渲染方面radi/server导出renderToString把组件和响应式表达式一次性展开成 HTML 字符串不派发任何生命周期事件src/server.ts的头部注释写明了这个约定SSR 与客户端的对照测试在src/tests/server/下。适合谁成本如何Radi 面向的场景比较明确高频更新的 UI表格、仪表盘、编辑器想避开整树重渲染同时保留 JSX 和 TypeScript 的开发体验。代价是心智模型和 React 不同——props 是函数、组件只执行一次、更新要显式调用update迁移时这些都要过一遍。入门建议直接读 README 的 API Reference再看 src/client.ts 的主实现代码量很小一个下午可以读透。【免费下载链接】radiTiny (in size) front-end framework with no extra browser re-flows项目地址: https://gitcode.com/gh_mirrors/ra/radi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考