Octane - React 的编程模型,编译
继 Inferno 之后,延续其以性能为首的目标:React 的 hooks、Suspense 和 actions,提前编译。没有虚拟 DOM。没有 hooks 规则。没有手动维护的依赖数组——编译器为您解决代码捕获的问题。开始使用与 React 的区别 Counter.tsrx // Counter.tsrx — hooks 紧挨输出,没有 hooks 规则 import { useState, useEffect } from 'octane' ; export function Counter ( props ) @{ const [ count , setCount ] = useState ( 0 ); // 按条件调取的 hook 可以正常工作——插槽按调用位置分配,而不是调用顺序。 if ( ! props.paused) { useEffect (() => { console. log ( 'count is now' , count); }); // 编译器会推断 [count] } < button onClick = { () => setCount (count + 1 ) } > { 'Count: ' + count } </ button > } 实时暂停 // count 现在是 0 没有 hooks 规则 没有依赖数组和 hooks 规则。编译器跟踪您的效果、备忘和回调实际使用的内容,并且 hooks 可以放在条件或提早返回之后。 改进的异步 独立的 use() 调用一同开始,而不是一个接一个在树中挂起。嵌套的 fetch 提前热身,流式服务器端渲染尽快发送每个边界而不是虚拟 DOM 模板编译为克隆节点和直接的 DOM 写入,而键控 @for 列表移动的节点最少。普通的 .tsx 仍然可以使用,因此您可以逐个组件采用 .tsrx。 熟悉的模型 Hooks、memo、context、portals、transitions、actions、受控表单和 Suspense 均如您所预期地工作。事件是原生的,refs 只是 props,53 个第一方绑定覆盖您已经使用的库。超过 11,500 次在整个运行时、编译器、SSR 和绑定的测试执行,包括编译器模式的重新运行;核心套件有 3,900 多个不同的案例。基于 React 的覆盖逐个案例跟踪 0 hooks 规则——将其放在条件之后或提早返回之后 53 个第一方生态系统绑定用于状态、数据、路由、UI、表单、图表、3D 等等 快速应该是您的应用程序的感受,而不是您必须思考的新方法。 为什么我要将我的应用迁移到 Octane? Octane 组件是您已经编写的组件。它们是带有 hooks、props 和 context 的普通函数。如果您了解 React,您就了解 Octane。关于状态存储位置和数据流动的直觉在第一天就会转移过来。您不必重写应用程序来采纳它。保持现有的 TSX,逐个迁移组件到 TSRX,并全程交付。 组件在这个过程中保持形状,因此 AI 代理也可以迁移应用,而无需围绕新的响应式模型重新设计它。 为什么 Octane 不基于信号构建? 信号是一个不错的工具,在适合的时候您仍然可以在 Octane 应用中使用它们。但基于信号构建的框架使每个应用都以信号方式表示和读取状态。Octane 将组件保持为普通函数,自上而下读取。编译器做额外的工作,所以您的代码不必这样。贸易仍然保持。信号仍然胜过为其构建的工作负载。在下面的检查套件中,Octane 维护了节奏,而不要求您重新接线您的思考。 看到 TSRX 添加了什么 → 静默失败的错误 Octane 提前编译,因此错误配置通常会降级而不是出错。树中有两个运行时副本会静默打破 hooks 和 context,因为 hook 状态是按运行时实例键控的。普通的 tsc 错误处理每个 .tsrx 文件。一个 declare module '*.tsrx' 的 shim 会将您自己的组件转换为任何。 octane doctor 进行 20 项检查,正是针对那些。 pnpm add -D @octanejs/cli npm create octane 从空目录运行的应用程序。 octane init 将 Octane 接入您已有的项目。 octane doctor --fix 找到静默破损,然后修复它。 octane add react-hook-form 安装将其移植的绑定。 octane explain 3 解码最小化的生产错误。 octane mcp add 为您的编码代理提供 Octane 工具。 CLI 参考 octane doctor dependencies ✖ 单一 Octane 运行时 2 个 octane 副本已安装 ✔ Vite peer range vite 8.1.5 满足 ^8.0.16 typescript ✖ JSX import source jsxImportSource 未设置 ⚠ 类型检查脚本 typecheck 运行普通 tsc ✖ 未找到通配符 .tsrx 声明 declare module '*.tsrx' 在 1 个文件中 3 个失败 · 1 个警告 · 11 个通过 `octane doctor --fix` 可以修复 2 项发现。逐步迁移。与 OctaneCompat。已经拥有 React 19 应用?将编译的 Octane islands 放入其中,只需一个组件。事件保持原生和委派,islands 使用普通的 use() 读取您的真实 React 上下文,它们在服务器上渲染并在客户端水合。逐个组件迁移——无需重写,无需大爆炸。 唯一不交叉过来的事情:React 服务器组件。其他一切——hooks、Suspense、context、SSR——都随之而来。 阅读 OctaneCompat指南 → App.tsx // App.tsx — 您现有的 React 19 应用 import { OctaneCompat } from 'octane/react' ; import { Counter } from './islands/Counter.tsrx' ; export function App () { return ( < div c
本站免费、广告极少。如果觉得有帮助,可以请我们喝杯咖啡 —— 任何金额都对持续运营有实际帮助。
☕请我喝杯咖啡