Vidact – 一个将 React 转换为直接 DOM 操作的编译器
Vidact – a compiler that turns React into direct DOM operations

原始链接: https://www.vidact.dev/

Vidact Start 增加了文件路由、服务器加载器、SSR、水合作用（hydration）和客户端导航，所有这些都由同一个编译器生成，因此服务器和浏览器的输出在构建时即保持一致。探索 Vidact Start `src/routes/products/$productId.tsx` ```tsx import { defineFileRoute } from '@vidact/start' const loader = async ({ params }) => ({ product: await findProduct(params.productId), }) export function ProductRoute({ loaderData }) { return

{loaderData.product.name}

} export const Route = defineFileRoute({ loader, component: ProductRoute, }) ```

Vidact 是一个基于 Rust 的实验性编译器，它将 React 风格的组件和 Hook 转换为直接的 DOM 操作，从而消除了对虚拟 DOM、协调器或运行时库的需求。通过分析组件表达式并生成静态更新函数，Vidact 确保状态变更只会触发精确的、有针对性的 DOM 修改，而非完整的组件重新渲染。该项目最初于六年前作为一项实验启动，现已利用 React Compiler 的 AST 和依赖分析基础设施进行了重启。Vidact 被设计为 React 的一个严格子集；如果在编译过程中遇到无法支持的行为，它会刻意报错，以确保性能的可预测性，而不是回退到较慢的运行时方法。该项目还包含支持服务端渲染（SSR）、注水（hydration）和客户端导航的“Vidact Start”。尽管该项目目前处于测试阶段，但开发者计划很快将其投入生产环境测试。针对落地页的用户反馈促使开发者承诺改进文档，此前一些社区成员认为文档过于依赖人工智能生成的内容。你可以访问 vidact.dev 了解该项目。

Vidact Start adds file routes, server loaders, SSR, hydration, and client navigation, all generated by the same compiler, so server and browser output match by construction.

Explore Vidact Start

src/routes/products/$productId.tsx

import { defineFileRoute } from '@vidact/start'const loader = async ({ params }) => ({  product: await findProduct(params.productId),})export function ProductRoute({ loaderData }) {  return <h1>{loaderData.product.name}</h1>}export const Route = defineFileRoute({  loader,  component: ProductRoute,})

Vidact – 一个将 React 转换为直接 DOM 操作的编译器 Vidact – a compiler that turns React into direct DOM operations

{loaderData.product.name}

Vidact – 一个将 React 转换为直接 DOM 操作的编译器
Vidact – a compiler that turns React into direct DOM operations