从counter开始学GPUIX：最小React桌面应用的5个核心概念

从counter开始学GPUIX：最小React桌面应用的5个核心概念

【免费下载链接】gpuixNode.js & React bindings for Zed GPUI.项目地址: https://gitcode.com/gh_mirrors/gp/gpuix

GPUIX 是一个用React + TypeScript 构建原生 GPU 加速桌面应用的新框架：没有 Electron、没有 WebView，你的 React 组件会通过 Metal、DirectX 或 Vulkan 直接绘制到 GPU。这篇文章用一个最小的 counter 计数器示例，带你一次看懂 GPUIX 的 5 个核心概念——它们组合起来，就是那个 GPU 渲染的桌面聊天应用。

1️⃣ render() 函数：整个应用只需要这一行入口

GPUIX 的入口不是ReactDOM.createRoot，而是一个叫 render() 的函数：

import { render } from '@gpuix/react' render(<App />, { title: 'GPUIX Counter', width: 800, height: 600 })

它一口气做了三件事：创建原生窗口、挂载 React、启动帧循环。官方提醒：应用入口请只用render()，不要手动调用createRenderer()，否则热更新时会建出第二个宿主。

配合bun --hot启动（cd examples && bun --hot counter.tsx），每次保存文件，窗口、GPU 设备、原生模块都保持不变，只有 React 树在同一个窗口上重新挂载——这是"remount"，不是完整的 React Refresh。

2️⃣ useState 状态：用法不变，但每次重渲染都直达 GPU

打开 counter.tsx，状态部分就是最普通的 React：

function Counter() { const [count, setCount] = useState(0) const [hovered, setHovered] = useState(false) // ... }

onClick里setCount(c => c + 1)触发重渲染，新的元素、样式、文本会以变更（mutation）形式直接发给 Rust 侧——没有整棵树的 JSON 序列化。这个示例覆盖了加、减、重置三种交互，按钮颜色也随状态变化。

3️⃣ 事件系统：从 GPU 一路回到 React 处理器

很多人以为桌面框架的事件是"假的"。GPUIX 的事件链是真实的原生链路：

你在 GPU 画面上点击 → GPUI 命中检测触发 on_click → Rust 通过线程安全回调把事件送回 JS → 事件注册表按 (元素ID, 事件类型) 找到处理器 → React onClick 执行，状态更新，重新渲染

payload 里带着x、y、clickCount、modifiers等字段。完整支持的事件清单见 host.ts 与 README 的 Supported Events 表格：点击、按下/松开、进入/离开、键盘、焦点、滚动、输入变更、提交一应俱全。

4️⃣ style 样式：CSS 手感 + 原生 hover/active

写样式时用的还是熟悉的style对象，flex 布局、圆角、阴影、现代颜色语法（oklch()等都行）：

<div style={{ backgroundColor: '#3b82f6', borderRadius: 8, padding: 12, hover: { backgroundColor: '#2563eb' }, active: { backgroundColor: '#1d4ed8' } }}> <div style={{ color: '#ffffff' }}>Press</div> </div>

注意hover/active是嵌套的样式对象：鼠标悬停变色由 Rust 端原生处理，零 JavaScript 往返。

⚠️ 新手最容易被坑的一点：GPUI 中文字颜色默认是黑色，且不从父元素继承。每个<text>或文本div都要显式写color，否则深色背景上看不见。

5️⃣ 渲染原理：React 变更 → RetainedTree → GPU

最后一张图帮你把前 4 个概念串起来：

• React（JS 侧）：reconciler 只发送"变化的部分"——createElement、appendChild、setStyle这类变更；
• Rust（napi-rs 侧）：RetainedTree 保存元素、样式和事件标记，每帧由GpuixView::render()构建 GPUI 元素；
• GPUI（GPU 侧）：Flexbox 布局后直接绘制到 Metal / DirectX / Vulkan。

这也是 GPUIX 快的原因：跨语言边界的永远只有增量变更，而不是整棵树的快照。

继续探索：官方示例清单

counter 只是起点，examples/ 目录里还有这些可以直接运行的示例：

学会 counter 的这 5 个概念后，直接打开chat.tsx吧——滚动容器、长列表、文字选择、motion.div动画，你都会认得它们背后的原理。🚀

【免费下载链接】gpuixNode.js & React bindings for Zed GPUI.项目地址: https://gitcode.com/gh_mirrors/gp/gpuix