diff --git a/translations/zh-cn/README.md b/translations/zh-cn/README.md index 274d2bfb2..804513969 100644 --- a/translations/zh-cn/README.md +++ b/translations/zh-cn/README.md @@ -1,7 +1,12 @@ -

- +

+

+ + + + + +

-
@@ -38,21 +43,23 @@

官方网站 | - 代码示例 + 示例 | - 开发指南 + 指南 | - English + English | - PT-BR + PT-BR | - 日本語 + 日本語 + | + Türkçe

+
+
-
- -Dioxus 是一个可移植的、高性能的、符合人体工程学的框架，使用 Rust 语言构建跨平台的用户界面。 +使用单个代码库构建Web、桌面和移动应用，以及更多。零配置启动、集成的热重载和基于信号的状态管理。使用服务器功能添加后端功能，并使用我们的CLI进行捆绑。 ```rust fn app() -> Element { @@ -62,117 +69,293 @@ fn app() -> Element { h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" } - }) + } } ``` -Dioxus 可用于生成 网页前端、桌面应用、静态网站、移动端应用、TUI 程序、 liveview 程序等多类平台应用，Dioxus 完全与渲染器无关，可以作用于任何渲染平台。 -如果你能够熟悉使用 React 框架，那 Dioxus 对你来说将非常简单。 +## ⭐️ 独特功能： -## 独特的特性: +- 三行代码即可实现跨平台应用（Web、桌面、移动、服务器等） +- [人体工程学的状态管理](https://dioxuslabs.com/blog/release-050)，结合了React、Solid和Svelte的优点 +- 非常高效，由Rust最快的wasm框架 [sledgehammer](https://dioxuslabs.com/blog/templates-diffing) 提供支持 +- 集成的捆绑包，可部署到Web、macOS、Linux和Windows +- 还有更多！阅读 [Dioxus漫游之旅](https://dioxuslabs.com/learn/0.5/)。 -- 只需不到 10 行代码就能原生运行桌面程序（并非 Electron 的封装） -- 符合人体工程学的设计以及拥有强大的状态管理 -- 全面的内联文档 - 包含所有 HTML 元素、监听器 和 事件 指南。 -- 极快的运行效率 🔥🔥 和极高的内存效率 -- 智能项目热重载以便快速迭代 -- 使用协程和 Suspense 来进行一流的异步支持 -- 更多内容请查看 [版本发布信息](https://dioxuslabs.com/blog/introducing-dioxus/). +## 瞬时热重载 -## 已支持的平台 +使用一个命令 `dx serve`，您的应用程序即可运行。编辑您的标记和样式，并实时查看结果。目前Rust代码热重载尚未达到一流水平，但也许可以使用 [hot-lib-reloader](https://docs.rs/hot-lib-reloader/latest/hot_lib_reloader/) 实现。 + +
+ +
+ +## 用于Web和桌面部署的捆绑包 + +只需运行 `dx bundle`，您的应用程序将被构建和捆绑，并进行最大化的优化。在Web上，利用 [`.avif` 生成，`.wasm` 压缩，代码缩小](https://dioxuslabs.com/learn/0.5/reference/assets)，等等。构建的Web应用程序大小 [不到50kb](https://github.com/ealmloff/tiny-dioxus/)，桌面/移动应用程序小于15mb。 + +
+ +
+ +## 出色的文档 + +我们花费了大量精力构建清晰、易读和全面的文档。所有HTML元素和监听器都使用MDN文档进行了记录，并且我们的文档站点通过Dioxus本身进行持续集成，以确保文档始终保持最新。查看 [Dioxus网站](https://dioxuslabs.com/learn/0.5/) 获取指南、参考资料、示例和更多信息。有趣的事实：我们将Dioxus网站用作新特性的测试平台 - [来看看吧！](https://github.com/dioxusLabs/docsite) + +
+ +
+ +## 开发者体验的重点 + +Dioxus优先考虑开发者体验，我们为端到端工具链付出了大量努力。我们构建了一个 [VSCode扩展](https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus)，可以自动格式化您的RSX代码，将HTML转换为RSX等等。我们还建立了一个非常强大的 [CLI](https://dioxuslabs.com/learn/0.5/CLI)，支持创建新应用程序、提供服务和跨平台捆绑，并且部署正在路上。 + +
+ +
+ +## 社区 + +Dioxus是一个社区驱动的项目，拥有非常活跃的 [Discord](https://discord.gg/XgGxMSkvUM) 和 [GitHub](https://github.com/DioxusLabs/dioxus/issues) 社区。我们一直在寻求帮助，乐意回答问题并帮助您入门。 [我们的SDK](https://github.com/DioxusLabs/dioxus-std) 由社区运行，我们甚至有一个 [GitHub组织](https://github.com/dioxus-community/)，用于最好的Dioxus crates，这些crate可以获得免费升级和支持。 + +
+ +
+ +## 全职核心团队 + +Dioxus已经从一个副业项目发展成为一个由全职工程师组成的小团队。由于FutrueWei、Satellite.im和GitHub Accelerator项目的慷慨支持，我们能够全职工作在Dioxus上。我们的长期目标是通过提供高质量的付费企业工具使Dioxus自我维持。如果您的公司有兴趣采用Dioxus，并希望与我们合作，请联系我们！ + +## 支持的平台
- + - + - + - + - + + + + +
网站项目 + Web +
+ 一级支持 +
    -
  • 使用 WebAssembly 直接对 DOM 进行渲染
    • -
  • 为 SSR 提供预渲染或作为客户端使用
    • -
  • 简单的 "Hello World" 仅仅 65kb, 媲美 React 框架
    • -
  • 内置开发服务和热重载支持，方便项目快速迭代
    • +
  • 使用WebAssembly直接渲染到DOM
    • +
  • 在服务器端预渲染，然后在客户端重新hydrate
    • +
  • 简单的 "hello world" 约为50kb，与React相当
    • +
  • 内置的开发服务器和热重载以进行快速迭代
桌面应用 + Fullstack +
+ 一级支持 +
    -
  • 使用 Webview 进行渲染 或 使用 WGPU 和 Skia（试验性的）
    • -
  • 无多余配置，简单的使用 `cargo build` 即可快速构建
    • -
  • 对原生系统的全面支持
    • -
  • 支持 Macos、Linux、Windows 等系统，极小的二进制文件
    • +
  • Suspense、hydration 和服务器端渲染
    • +
  • 快速添加后端功能与服务器功能
    • +
  • 提取器、中间件和路由集成
    • +
  • 兼容桌面和移动设备！
移动端应用 + 桌面 +
+ 一级支持 +
    -
  • 使用 Webview 进行渲染 或 使用 WGPU 和 Skia（试验性的）
    • -
  • 支持 IOS 和 安卓系统
    • -
  • 显著的 性能强于 React Native 框架
    • +
  • 使用Webview渲染，或者实验性地使用WGPU或 Freya（skia）
    • +
  • 零配置设置。只需 `cargo run` 或 `dx serve` 即可构建您的应用程序
    • +
  • 完全支持无IPC的本机系统访问
    • +
  • 支持macOS、Linux和Windows。便携式 <3mb 二进制文件
Liveview + Liveview +
+ 一级支持 +
    -
  • 完全使用服务器渲染应用程序或单个组件
    • -
  • 与受欢迎的后端框架进行融合（Axum、Wrap）
    • -
  • 及低的延迟,可以同时支持10000个以上的终端程序
    • +
  • 完全在服务器上渲染应用程序 - 或仅渲染一个组件
    • +
  • 与流行的Rust框架（如Axum和Warp）集成
    • +
  • 极低的延迟和支持10,000个以上的同时应用程序
终端程序 + 移动 +
+ 二级支持 +
    -
  • 在终端程序中渲染，类似于： ink.js
    • -
  • 支持 CSS 相关模型（类似于浏览器内的）
    • -
  • 内置类似文字输入，按钮和焦点系统的小组件
    • +
  • 使用Webview渲染，或者实验性地使用WGPU或Skia
    • +
  • 支持iOS和Android
    • +
  • 目前还处于相当实验性阶段，2024年将有大量改进
    • +
+
+ 终端 +
+ 二级支持 + 		+
    +
  • 直接将应用程序渲染到终端，类似于 ink.js
    • +
  • 由浏览器的熟悉的flexbox和CSS模型提供支持
    • +
  • 内置小部件，如文本输入、按钮和焦点系统
-## 为什么选择 Dioxus? +## 运行示例 -目前有非常多的应用开发选择，为什么偏偏要选择 Dioxus 呢？ +该存储库顶层的示例可以通过 `cargo run --example ` 运行。但是，我们建议您下载dioxus-cli并使用 `dx serve` 运行示例，因为许多示例还支持web。在运行web时，您可以修改Cargo.toml以禁用默认的desktop功能，或者使用 -首先，Dioxus 将开发者的体验放在首位。这体现在 Dioxus 特有的各种功能上。 +## Dioxus与其他框架 -- 自动格式化 RSX 格式代码，并拥有 VSCode 插件作为支持。 -- 热加载基于 RSX 代码解析器，同时支持桌面程序和网页程序。 -- 强调文档的重要性--我们的指南是完整的，并且我们对所有 HTML 元素都提供文档支持。 +我们喜欢Rust生态系统中的所有框架，并享受着Rust生态系统中的创新。事实上，我们的许多项目都与其他框架共享。例如，我们的flex-box库 [Taffy](https://github.com/DioxusLabs/taffy) 被 [Bevy](https://bevyengine.org/)、[Zed](https://zed.dev/)、[Lapce](https://lapce.dev/)、[Iced](https://github.com/iced-rs/iced) 等项目使用。 -Dioxus 也是一个可扩展化的平台。 +Dioxus侧重于几个与其他框架不同的重点，这些重点使其与其他框架不同： -- 通过实现一个非常简单的优化堆栈机，轻松构建新的渲染器。 -- 构建并分享开发者自定义的组件代码。 +- **类似React**：我们依赖于组件、props和hooks等概念来构建UI，我们的状态管理更接近于Svelte而不是SolidJS。 +- **HTML和CSS**：我们完全依赖HTML和CSS，包括怪癖和全部。 +- **渲染器不可知**：您可以根据需要将渲染器替换为任何平台，感谢我们的快速VirtualDOM。 +- **合作**：只要有可能，我们就会拆分出像[Taffy](https://github.com/DioxusLabs/taffy)、[magnanis](https://github.com/DioxusLabs/collect-assets)、[include_mdbook](https://github.com/DioxusLabs/include_mdbook)和[blitz](http://github.com/dioxusLabs/blitz)这样的crate，以便生态系统能够共同成长。 -Dioxus 那么优秀，但什么时候它不适合我呢？ +### Dioxus与Tauri -- 它还没有完全成熟。api 仍在变化，可能会出现故障（尽管我们试图避免） -- 您需要运行在 no-std 的环境之中。 -- 你不喜欢使用 React-like 的方式构建 UI 项目。 +Tauri是一个用于构建桌面（和即将到来的移动）应用程序的框架，其中前端使用诸如React、Vue、Svelte等的基于web的框架编写。每当需要进行本机工作时，您可以编写Rust函数并从前端调用它们。 -## 贡献代码 +- **纯Rust**：Tauri的架构将您的UI限制为JavaScript或WebAssembly。使用Dioxus，您的Rust代码在用户的计算机上本地运行，使您可以执行诸如生成线程、访问文件系统等操作，而无需任何IPC。这大大简化了应用程序的架构，并使其更易于构建。您可以使用Dioxus-Web作为前端构建Tauri应用程序。 -- 在我们的 [问题追踪](https://github.com/dioxuslabs/dioxus/issues) 中汇报你遇到的问题。 -- [加入](https://discord.gg/XgGxMSkvUM)我们的 Discord 与我们交流。 +- **不同的范围**：Tauri需要支持JavaScript及其复杂的构建工具链，从而限制了您可以使用的范围。由于Dioxus专注于Rust，我们能够提供额外的实用工具，如服务器函数、高级捆绑和本机渲染器。 + +- **共享DNA**：虽然Tauri和Dioxus是独立的项目，但它们确实共享库，如Tao和Wry：由Tauri团队维护的窗口和webview库。 + +### Dioxus与Leptos + +Leptos是用于构建全栈web应用程序的库，类似于SolidJS和SolidStart。两个库在web上有着相似的目标，但有几个关键区别： + +- **响应模型**：Leptos使用信号作为其基础的响应性，而Dioxus选择使用VirtualDom和重新渲染。虽然从理论上讲，信号更高效，但实际上，由于我们的[block-dom](https://dioxuslabs.com/blog/templates-diffing)模板并没有进行实际的diffing，而是直接重新渲染了UI，Dioxus的VirtualDom的表现与Leptos相比几乎没有什么差异，并且[实际上比Leptos更快](https://krausest.github.io/js-framework-benchmark/2024/table_chrome_123.0.6312.59.html)。 + +- **控制流**：因为Leptos使用信号来实现响应性，所以您只能使用Leptos的原语来进行 `for` 循环和 `if` 语句。如果您搞错了这一点，您的应用程序将失去响应性，导致难以调试的UI问题。使用Dioxus，您可以使用迭代器、常规的Rust `for` 循环和 `if` 语句，您的应用程序仍然是响应式的。在实践中，一个向列表中插入计数器的Dioxus组件可能如下所示： + +```rust +fn Counters() -> Element { + let mut counters = use_signal(|| vec![0; 10]); + + rsx! { + button { onclick: move |_| counters.push(counters.len()), "Add Counter" } + ul { + for idx in 0..counters.len() { + li { + button { onclick: move |_| counters.write()[idx] += 1, "{counters.index(idx)}" } + button { onclick: move |_| { counters.remove(idx); }, "Remove" } + } + } + } + } +} +``` + +[在Leptos中，您将使用``组件。](https://book.leptos.dev/view/04_iteration.html#dynamic-rendering-with-the-for-component): + +```rust +fn Counters() -> impl IntoView { + let counters = RwSignal::new(vec![0; 10]); + + view! { + + +
  • + + +
    • +     + } +} +``` + +- **`Copy` 状态**: Dioxus 0.1 到 0.4 版本依赖于生命周期来放宽 Rust 的借用检查规则。这对于事件处理程序效果很好，但在异步方面表现不佳。在 Dioxus 0.5 中，我们已经转向了从 Leptos 借鉴来的 [`Copy` 状态模型](https://crates.io/crates/generational-box)。 + +- **不同的范围**: Dioxus 提供了用于 web、桌面、移动、LiveView 等的渲染器。我们还维护着社区库和跨平台 SDK。这项工作的范围很大，意味着我们的发布速度历来比 Leptos 慢。Leptos 专注于全栈 web，具有 Dioxus 没有的功能，如基于 `` 的流式 HTML、islands、`
    ` 组件和其他特定于 web 的功能。通常情况下，您使用 Leptos 构建的 web 应用程序将占用较小的空间。 + +- **不同的 DSL**: 虽然两个框架都针对 web，但 Dioxus 使用自己的定制 Rust 风格的 DSL 来构建 UI，而 Leptos 使用更类似 HTML 的语法。我们选择了这样做以保留与代码折叠和语法高亮等 IDE 功能的兼容性。通常情况下，Dioxus 倾向于在其 DSL 中使用更多的 "魔法"。例如，dioxus 将自动为您格式化字符串，而 Leptos 可以将字符串拆分为静态和动态段。 + +### Dioxus vs Yew + +Yew 是用于构建单页面 web 应用程序的框架，最初是 Dioxus 的灵感来源。不幸的是，Yew 的架构不支持我们想要的各种功能，因此 Dioxus 应运而生。 + +- **单页面应用程序**: Yew 专门设计用于单页面 web 应用程序，并与 web 平台紧密相关联。Dioxus 是全栈和跨平台的，适用于构建 web、桌面、移动和服务器应用程序。 + +- **开发工具**: Dioxus 提供了许多实用工具，如自动格式化、热重载和打包工具。 + +- **持续支持**: Dioxus 在日常基础上积极维护，不断添加新功能和修复错误。 + +### Dioxus vs egui + +egui 是 Rust 的跨平台 GUI 库，支持像 [Rerun.io](https://www.rerun.io) 这样的工具。 + +- **Immediate vs Retained**: egui 被设计为在每一帧上重新呈现。这适用于游戏和其他交互式应用程序，但它不会在帧之间保留样式和布局状态。Dioxus 是一个保留的 UI 框架，意味着 UI 只构建一次，然后在帧之间进行修改。这使得 Dioxus 可以使用本地 web 技术，如 HTML 和 CSS，具有更好的电池寿命和性能。 + +- **可定制性**: egui 带有自己的样式和布局解决方案，而 Dioxus 期望您使用内置的 HTML 和 CSS。这使得 dioxus 应用程序可以使用任何 CSS 库，如 Tailwind 或 Material UI。 + +- **状态管理**: egui 的状态管理基于单个全局状态对象。Dioxus 鼓励通过使用组件和属性封装状态，使组件更可重用。 + +### Dioxus vs Iced + +Iced 是受 Elm 启发的跨平台 GUI 库。Iced 使用 WGPU 进行本机渲染，并支持使用 DOM 节点的 web。 + +- **Elm 状态管理**: Iced 使用 Elm 的状态管理模型，该模型基于消息传递和减速器。这与 Dioxus 的状态管理模型完全不同，有时可能相当冗长。 + +- **本地感觉**: 由于 Dioxus 使用 webview 作为其渲染器，因此它自动获得本地文本输入、粘贴处理和其他本地功能，如可访问性。Iced 的渲染器目前不实现这些功能，使其感觉不太本地。 + +- **WGPU**: Dioxus 的 WGPU 渲染器目前还不太成熟，尚未准备好供生产使用。Iced 的 WGPU 渲染器要成熟得多，并且正在生产中使用。这使得某些需要 GPU 访问的应用程序可以使用 Iced 构建，而目前无法使用 Dioxus 构建。 + +### Dioxus vs Electron + +Dioxus 和 Electron 是两个完全不同的项目，目标相似。Electron 使开发人员能够使用 HTML、CSS 和 JavaScript 等 web 技术构建跨平台桌面应用程序。 + +- **轻量级**: Dioxus 使用系统的本地 WebView - 或者选择性地，一个 WGPU 渲染器 - 来渲染 UI。这使得典型的 Dioxus 应用程序在 macOS 上约为 15mb，而 Electron 则为 100mb。Electron 还提供了一个嵌入式的 chromium 实例，无法像 Dioxus 那样与主机操作系统共享系统资源。 + +- **成熟度**: Electron 是一个成熟的项目，拥有庞大的社区和大量的工具。相比之下，Dioxus 相对于 Electron 来说还很年轻。期望遇到需要额外工作来实现的功能，如 deeplinking 等特性。 + +## 贡献 + +- 查看网站上有关[贡献的部分](https://dioxuslabs.com/learn/0.5/contributing)。 +- 在我们的 [问题跟踪器](https://github.com/dioxuslabs/dioxus/issues) 上报告问题。 +- [加入](https://discord.gg/XgGxMSkvUM) discord 并提出问题！ -## 开源协议 +## 许可证 -本项目使用 [MIT license]. +此项目根据 [MIT 许可证] 许可。 -[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT +[mit 许可证]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT + +除非您明确说明，否则您提交的任何贡献都将由您自己有意提交，以 MIT 许可证许可，不附加任何其他条款或条件。 -除非您另有明确声明，否则有意提交的任何贡献将被授权为 MIT 协议，没有任何附加条款或条件。