写过 Rust 前端的人都踩过这个坑——每次改一行代码整个组件树都要重来,今天 Leptos 用信号把这件事彻底原生化了

写过 Rust 前端的人都踩过这个坑——每次加个计数器,以为只是改一行,结果整个组件树都重新跑了一遍。VDOM diffing 在 React/Yew 里是天经地义,但在 Leptos 里,这件事从根上就不存在了。

先看数据

js-framework-benchmark 是前端渲染性能的黄金标准。在 2026 年 8 月的实测里:

框架 峰值吞吐量 (req/s)
Vue 32,903
Leptos 32,434
Angular 30,423
Yew 30,126
React 19 17,895

Leptos 和 Vue 几乎并列,比 React 快了近一倍,比同样是 Rust 的 Yew 快 7.5%。这背后不是微优化,是架构差异。

VDOM 差在哪

Yew 和 Dioxus 走的都是类 React 路线:状态变 → 组件函数重新跑一遍 → 生成新虚拟 DOM 树 → 和旧树 diff → 把补丁应用到真实 DOM。

哪怕你只改了一个按钮文字,整个组件函数全部重新执行。Diffing 是额外开销,组件重新跑是另一重开销,两头都在吃性能。

Leptos 完全不是这个逻辑。

Leptos 的细粒度响应式

组件只跑一次,创建真实 DOM 节点,同时建立响应式系统。然后:

use leptos::*;

#[component]
fn Counter() -> impl IntoView {
    let (count, set_count) = create_signal(0);

    view! {
        <button on:click=move |_| set_count.update(|n| *n + 1)>"+1"</button>
        <p>"点击次数: " {count} "</p>
    }
}

信号 count 变了,只更新 {count} 那个文本节点。其他 DOM 节点碰都不会碰。没有组件重跑,没有 diffing。

这靠的是 Leptos 的响应式追踪:它在整个表达式级别建立依赖图,信号变的时候精确知道哪个 DOM 节点需要更新,不需要任何运行时代码。

Leptos 官方 benchmark 里的服务端渲染数据也印证了这点——Leptos 渲染 HTML 速度约等于 Tera(最快的 Rust 模板引擎之一),是 Yew 的 3.8 倍、Sycamore 的 5.7 倍。

信号系统的一些细节

Leptos 的信号(signals)同时是 Copy 和 ‘static 的。实现方式是用 arena allocation——ReadSignal、WriteSignal、Memo 实际上只是索引,不持有数据本身,所以可以 move 进任何闭包而不需要 clone。

let (count, set_count) = create_signal(0);  // Copy,可以直接 move 进事件处理
let double = move || count() * 2;           // 依赖自动追踪

这是 Leptos 和 Sycamore 共同的创新,和 SolidJS 的思路一致。

服务端渲染和 Server Functions

Leptos 不只是纯前端框架,它有完整 SSR 支持,还支持流式 HTML 和数据 streaming。

更有意思的是 #[server] 宏——你写的 Rust 函数可以直接在客户端调用,但实际运行在服务端,不需要自己写 REST API:

#[server(GetPosts, "/api")]
pub async fn get_posts() -> Result<Vec<Post>, ServerFnError> {
    let db = use_context::<PgPool>().unwrap();
    let posts = sqlx::query_as!(Post, "SELECT * FROM posts")
        .fetch_all(&db).await?;
    Ok(posts)
}

同一套类型在前后端共享,不会有序列化不匹配的问题。

局限性

编译时间比 JavaScript 长,首次 cargo build 要耐心等。支持 WASM 以外的 target(桌面/移动)是 Dioxus 的强项。npm 生态不能用,所有依赖都必须是 Rust 原生生态。

什么时候该选 Leptos

Rust 团队做高性能前端界面——数据仪表盘、实时可视化、复杂表单密集型应用。2026 年信号化架构已经是主流趋势,SolidJS (Lighthouse 98)、Svelte 5 (96) 分列性能榜前二,Vue 4、Angular 20 都在往信号方向转,React 靠编译器走了一条不同的路。

如果你的痛点是「明明只改一个数字,整个页面都在抖」,Leptos 的细粒度响应式值得了解。

评论区

0 条评论

登录后可评论。

铁锈·Rust工具链 12 阅读