Dioxus框架中Liveview

Liveview

Liveview允许应用程序在服务器上_运行_并在浏览器中_渲染_。它使用WebSockets在服务器和浏览器之间进行通信。

示例:

  • 简单示例

支持

Dioxus Liveview将在未来的版本中迁移到dioxus-fullstack。一旦迁移发生,你可能需要更新你的代码。我们计划使这次迁移尽可能小。

与Web平台相比,Liveview目前在功能上受到限制。Liveview应用程序在服务器上的原生线程中运行。这意味着浏览器API不可用,因此渲染WebGL、Canvas等并不像在Web上那样容易。然而,原生系统API是可访问的,所以流媒体、WebSockets、文件系统等都是可行的API。

路由器集成

目前,Dioxus路由器不与liveview渲染器中的浏览器历史集成。如果你有兴趣为Dioxus贡献这个功能,这个问题在这里被跟踪。

管理延迟

Liveview使得从客户端与服务器通信变得非常方便,但也存在一些缺点。主要是在Dioxus Liveview中,默认情况下每次交互都会通过服务器。

因此,使用liveview渲染器时,你需要非常注意管理延迟。在其他渲染器上足够快的事件,如受控输入,在liveview渲染器中可能会令人沮丧地难以使用。

为了解决这个问题,你可以在liveview应用程序中注入一些JavaScript。如果你使用原始属性作为监听器,你可以注入一些JavaScript,当事件被触发时将被运行:

rust 复制代码
rsx! {
    div {
        input {
            "oninput": "console.log('input changed!')"
        }
    }
}
相关推荐
BreezeJiang几秒前
父组件一更新,子组件就必须跟着更新吗?从 memo 走到 useCallback
前端·javascript
胡萝卜术1 分钟前
复用与并行:从自定义 Hooks 封装状态逻辑,到 Web Worker 的多线程计算
前端·javascript·面试
circuitsosk1 分钟前
长文本与高并发下的Token“瘦身”策略:Prompt压缩与上下文窗口优化
java·前端·python·prompt·上下文窗口·token优化
触底反弹1 分钟前
🏗️ 写完 Todos 之后,大型 React 项目的 7 个架构真相
前端·react.js·前端框架
huabuyu2 分钟前
CLS 总是修不好?因为你只盯着分数,从没拆开看过它
前端·javascript
倾颜3 分钟前
会 Vue / React,上手 Electron 真没那么难:前端开发者需要补齐的核心知识
前端
kisshyshy4 分钟前
从多页面到SPA:React Router 路由进阶完全指南
前端·javascript·react.js
JakeJiang4 分钟前
抓到接口还不够:用 AIProxy 改返回、Mock 数据、切测试环境
前端·后端
倾颜6 分钟前
从 Web 到桌面:AI Mind Electron Desktop Host 的安全边界设计
前端
Csvn7 分钟前
📡 前端错误监控从零搭建:window.onerror 与 unhandledrejection 的完整实践
前端