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 是一个实验性编译器，旨在弥合 React 开发模型与高性能 DOM 操作之间的鸿沟。通过利用 React Compiler 的分析基础设施，Vidact 将 React 风格的组件编译为直接与 DOM 交互的代码。与标准 React 不同，Vidact 摒弃了虚拟 DOM、协调器（reconciler）以及运行时依赖追踪。相反，组件仅在挂载时运行一次，编译器会为状态变更生成特定的更新函数。这种方法确保了仅受影响的 DOM 节点会被更新，从而显著降低了开销，并消除了向浏览器分发 React 运行时的必要。尽管该项目雄心勃勃，但目前仍处于测试阶段。它有意地将其功能限制为 React 的一个子集；当遇到与静态编译不兼容的 React 语义时，它会编译失败，而不是静默地退回到较慢的运行时。项目创建者 mohebifar 承认该项目的实验性质，目前正在生产环境中对其进行测试。社区对该项目的反馈（通过 Hacker News 分享）凸显了对文档质量（特别是使用大模型生成内容）的担忧，以及在没有传统运行时的情况下保持 React 动态灵活性的技术挑战。

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