网站 | 书籍 | Docs.rs | 游乐场 | Discord

您可以在awesome-leptos中找到有用的库和示例项目的列表。

当前main分支正在进行重大更改，以准备0.7版本发布。对于稳定版本，请使用v0.6.13标签

Leptos

use leptos::*;

#[component]
pub fn SimpleCounter(initial_value: i32) -> impl IntoView {
    // create a reactive signal with the initial value
    let (value, set_value) = create_signal(initial_value);

    // create event handlers for our buttons
    // note that `value` and `set_value` are `Copy`, so it's super easy to move them into closures
    let clear = move |_| set_value(0);
    let decrement = move |_| set_value.update(|value| *value -= 1);
    let increment = move |_| set_value.update(|value| *value += 1);

    // create user interfaces with the declarative `view!` macro
    view! {
        <div>
            <button on:click=clear>Clear</button>
            <button on:click=decrement>-1</button>
            // text nodes can be quoted or unquoted
            <span>"Value: " {value} "!"</span>
            <button on:click=increment>+1</button>
        </div>
    }
}

// we also support a builder syntax rather than the JSX-like `view` macro
#[component]
pub fn SimpleCounterWithBuilder(initial_value: i32) -> impl IntoView {
    use leptos::html::*;

    let (value, set_value) = create_signal(initial_value);
    let clear = move |_| set_value(0);
    let decrement = move |_| set_value.update(|value| *value -= 1);
    let increment = move |_| set_value.update(|value| *value += 1);

    // the `view` macro above expands to this builder syntax
    div().child((
        button().on(ev::click, clear).child("Clear"),
        button().on(ev::click, decrement).child("-1"),
        span().child(("Value: ", value, "!")),
        button().on(ev::click, increment).child("+1")
    ))
}

// Easy to use with Trunk (trunkrs.dev) or with a simple wasm-bindgen setup
pub fn main() {
    mount_to_body(|| view! {
        <SimpleCounter initial_value=3 />
    })
}

关于该框架

Leptos 是一个全栈、同构Rust网络框架，利用细粒度反应性构建声明性用户界面。

这是什么意思？

• 全栈：Leptos 可用于构建在浏览器（客户端渲染）或服务器（服务器端渲染）中运行的应用程序，或者通过在服务器上渲染HTML并在浏览器中添加交互性（服务器端渲染与水合）。这包括对数据（Resource）和HTML（<Suspense/>组件的无序或有序流）的HTTP流的支持。
• 同构：Leptos 提供了原语来编写同构的 服务器函数，即可以在客户端或服务器上以“相同形状”调用的函数，但仅在服务器上运行。这意味着您可以在客户端组件旁边编写服务器端逻辑（数据库请求、身份验证等），就像它们在浏览器中运行一样调用服务器函数，而不需要创建和维护单独的 REST 或其他 API。
• Web：Leptos 是基于 Web 平台和 Web 标准构建的。该 路由器 设计用于使用 Web 基础知识（如链接和表单）并在其基础上构建，而不是尝试取代它们。
• 框架：Leptos 提供了构建现代 Web 应用所需的大部分功能：响应式系统、模板库和同时在服务器和客户端上工作的路由器。
• 细粒度响应式：整个框架都是基于响应式原语构建的。这允许代码具有极低的开销并表现出极高的性能：当一个响应式信号的值发生变化时，它可以更新单个文本节点、切换单个类或从 DOM 中删除元素，而不需要运行任何其他代码。（因此，没有虚拟 DOM 的开销！)
• 声明式：告诉 Leptos 您希望页面看起来如何，然后让框架告诉浏览器如何实现。

了解更多

以下是一些学习 Leptos 的资源

• 书籍（正在进行中）
• 示例
• API 文档
• 常见错误（以及如何修复它们！）

nightly 备注

大多数示例都假设您正在使用 nightly 版本的 Rust 和 Leptos 的 nightly 功能。要使用 nightly Rust，您可以选择全局设置或按项目设置工具链。

要将 nightly 设置为所有项目的默认工具链（如果您还没有，还可以添加编译 Rust 到 WebAssembly 的功能）

rustup toolchain install nightly
rustup default nightly
rustup target add wasm32-unknown-unknown

但是，如果您只想在您的 Leptos 项目中使用 nightly，请添加以下内容的 rust-toolchain.toml 文件

[toolchain]
channel = "nightly"
targets = ["wasm32-unknown-unknown"]

nightly 功能启用了对访问和设置信号的函数调用语法，而不是 .get() 和 .set()。这导致了一个一致的心理模型，其中访问任何类型的响应式值（信号、memo 或派生信号）总是表示为一个函数调用。这只能在 nightly Rust 和 nightly 功能下实现。

cargo-leptos

cargo-leptos 是一个构建工具，旨在使构建同时运行在客户端和服务器上的应用程序变得容易，具有无缝集成。现在开始使用 Leptos 项目最好的方式是使用 cargo-leptos 和我们为 Actix 或 Axum 提供的起始模板。

cargo install cargo-leptos
cargo leptos new --git https://github.com/leptos-rs/start
cd [your project name]
cargo leptos watch

打开浏览器到 https://127.0.0.1:3000/。

常见问题解答

这个名字有什么含义？

Leptos（λεπτός）是古希腊语中的一个单词，意为“瘦，轻，精致，细腻”。对我来说，作为一名经典学者而非狗主人，它让我想起了推动框架的轻量级反应式系统。我后来了解到，这个词也是医学名词“钩端螺旋体病”（leptospirosis）的根源，这是一种影响人类和动物的血液感染……抱歉。在创建此框架的过程中没有伤害到任何狗。

它是否已准备好投入生产使用？

人们通常通过这个问题来表达三个意思之一。

1. API 是否稳定？也就是说，我是否需要将我的整个应用程序从 Leptos 0.1 重写到 0.2、0.3、0.4，或者我现在就可以编写它，并随着新版本的发布而受益于新功能和更新？

API 基本上已经确定。我们在添加新功能，但我们非常满意类型系统和模式已经到达的地方。就架构而言，我不期望您的代码在适应未来版本时出现重大的破坏性变化。

2. 是否存在错误？

是的，我确信有。您可以从我们的问题跟踪器的状态中看到，错误并不多，而且通常很快就得到了解决。但肯定的是，您可能会遇到需要框架级别修复的情况，这些修复可能不会立即解决。

3. 我是消费者还是贡献者？

这可能是最大的一个问题：“生产就绪”意味着对库的一种特定取向：您基本上可以使用它，而无需了解其内部或贡献的能力。每个人都有他们在堆栈中的这一层级：例如，我（@gbj）目前没有能力或知识为像 wasm-bindgen 这样的东西做出贡献：我仅仅依赖它工作。

目前社区中有几个人正在使用 Leptos，他们在工作中使用它来开发内部应用程序，同时也成为了重要的贡献者。我认为这就是目前正确的生产使用级别。可能存在您需要的缺失功能，您可能最终会自己构建它们！但对于内部应用程序，如果您愿意在过程中构建和贡献缺失的部分，那么框架现在肯定可以使用。

我可以将其用于原生 GUI 吗？

当然可以！显然，view 宏用于生成 DOM 节点，但您可以使用反应式系统轻松地驱动任何使用与 DOM 相同类型的面向对象、基于事件回调的框架的原生 GUI 工具包。原则是相同的

• 使用信号、派生信号和备忘录来创建您的反应式系统
• 创建 GUI 小部件
• 使用事件监听器来更新信号
• 创建效果来更新 UI

我整理了一个 非常简单的 GTK 示例，您可以了解我的意思。

为 0.7 版本开发的新渲染方法支持“通用渲染”，即它可以使用支持一组小功能集的 6-8 个功能的任何渲染库。（这是在 DOM、GTK 等典型的保留模式、面向对象风格的 GUI 工具包之上的一层。）这项未来的渲染工作将允许以与网络框架使用的声明性方法非常相似的方式创建原生 UI。

这与 Yew 有什么不同？

Yew 是 Rust 网页 UI 开发中最常用的库，但 Yew 和 Leptos 在理念、方法和性能方面存在几个差异。

• 虚拟 DOM 与细粒度：Yew 基于虚拟 DOM（VDOM）模型：状态变化导致组件重新渲染，生成新的虚拟 DOM 树。Yew 将其与之前的 VDOM 进行比较，并将这些补丁应用到实际 DOM 上。组件函数在状态变化时重新运行。Leptos 采用完全不同的方法。组件运行一次，创建（并返回）实际的 DOM 节点，并设置一个反应式系统来更新这些 DOM 节点。

• 性能：这具有巨大的性能影响：Leptos 在创建和更新 UI 方面比 Yew 快得多。

• 服务器集成：Yew 是在浏览器渲染的单页应用（SPA）成为主流的时期诞生的。虽然 Leptos 支持客户端渲染，但它也专注于通过服务器功能以及多种服务 HTML 的模式（包括乱序流）与您的应用程序的后端集成。

• 这与 Dioxus 有何不同？

与 Leptos 类似，Dioxus 是一个用于使用 Web 技术构建 UI 的框架。然而，在方法和功能上存在重大差异。

• VDOM 与细粒度：虽然 Dioxus 拥有高性能的虚拟 DOM（VDOM），但它仍然使用粗粒度/组件范围的响应性：改变状态值会重新运行组件函数，并将旧 UI 与新 UI 进行比较。Leptos 组件使用不同的思维模型，创建（并返回）实际的 DOM 节点，并设置一个响应式系统来更新这些 DOM 节点。

• Web 与桌面优先级：Dioxus 在全栈模式下使用 Leptos 服务器功能，但没有同样的基于 <Suspense> 的支持，例如流式 HTML 渲染，或者共享对整体 Web 性能的相同关注。Leptos 侧重于整体 Web 性能（流式 HTML 渲染、较小的 WASM 二进制文件大小等），而 Dioxus 在构建桌面应用程序时具有无与伦比的经验，因为您的应用程序逻辑作为原生 Rust 二进制文件运行。

• 这与 Sycamore 有何不同？

Sycamore 和 Leptos 都受到了 SolidJS 的影响。到目前为止，Leptos 拥有更大的社区和生态系统，并且发展更加活跃。其他差异

• 模板 DSL：Sycamore 使用自定义模板语言来处理视图，而 Leptos 使用类似 JSX 的模板格式。
• 'static 信号：Leptos 的主要创新之一是创建了 Copy + 'static 信号，具有良好的易用性。Sycamore 正在采用相同的模式，但尚未发布。
• Perseus 与服务器功能：Perseus 元框架提供了一种构建包含服务器功能 Sycamore 应用程序的意见化方法。Leptos 则在框架的核心中提供了服务器功能等原语。