@ frondruntime/反应
Frond的回放适配器:提供者,Suspense-ready节点钩,预装,控制,错误恢复,以及回放测试帮助器.
安装
bun add @frondruntime/core @frondruntime/react effect mobx mobx-react-lite
@frondruntime/react 取决于运行时间从 @frondruntime/core。 。 。 . effect, (中文(简体) ), mobx,以及 react 是同级运行时间合同。 读取可观测节点字段的组件应当使用 observer 从 mobx-react-lite。 。 。 .
提供者
import * as Frond from "@frondruntime/core";
import * as FrondReact from "@frondruntime/react";
const runtime = Frond.createRuntime();
export function App() {
return (
<FrondReact.FrondProvider runtime={runtime}>
<Routes />
</FrondReact.FrondProvider>
);
}
读取节点
import * as FrondReact from "@frondruntime/react";
import { observer } from "mobx-react-lite";
const ProfilePanel = observer(({ userId }: { userId: string }) => {
const profile = FrondReact.useNode(ProfileNode, { userId });
return <h1>{profile.displayName}</h1>;
});
useNode 准备状态中暂停,并将准备状态失败丢入最近的出错边界。 渲染路径只接收一个已准备好的作者节点实例 .
读取无悬念
const ProfileBadge = observer(({ userId }: { userId: string }) => {
const read = FrondReact.useNodeRead(ProfileNode, { userId });
switch (read._tag) {
case "Ready":
return <h1>{read.result.displayName}</h1>;
case "Pending":
return <Spinner />;
case "Error":
return <RetryBanner error={read.error} />;
default:
return null; // Unwired | Idle
}
});
useNodeRead 从不向悬疑区或错误边界投掷。 它返回读取的运行时间 : Unwired | Idle | Pending | Ready | Error - 用于必须使每个状态内化而不是将权力下放到边界的部件。 打开 Ready, (中文(简体) ), read.result 准确是宣布的结果类型 read.node 是作者类实例。 它仍然驱动同样的冷启动准备启动 并订阅变化, 因此节点 进展完全按照它将在 useNode编号 :useNodeState。 。 。 .
发布信号
usePublish 将一个组件绑在一个信号信道,该信道的名称和有效载荷宣布:
const publish = FrondReact.usePublish(Checkout);
<button type="button" onClick={() => void publish("checkout.started", { cartId, total })}>
Check out
</button>;
出版商是稳定的,而运行时间和频道是 - 一个频道通常是一个模块常数 - 因此它可以是其他钩子的依赖. 一旦每个订阅者运行完毕,发布就会解决,一个失败的订阅者被报告为运行时间事件而不是发布者,所以 void 在呼叫站点没有故障.
有一件事是拒绝的 void 不覆盖: 向已停止的运行时间发布失败 FrondRuntimeClosed。当运行时间被换到活树下时,窗口就可到达 createRuntimeCoordinator - 因为这个回调会保持即将结束的运行时间,直到重新生效。 在适用的情况下,以 .catch(() => {}) 而不是说 void。 。 。 .
这是从许多呼叫站点发布的频道的发布路径,这使得频道不断值得输出. 一个全应用域事频道通常是另一种情况:一个单一的发送点,一个每会话信封,以及一个频道常数故意保持不导出 usePublish 无法通过建筑到达。 形状是 调度器节点。频道、事件映射和订阅者看到的内容 @ frondruntime/ core (中文(简体) )。 。 。 .
周期钩
useNode- 准备节点或暂停/暂停.useNodeState- 准备节点加操作状态、结果有效性和最后操作失败.useNodeRead- 非扔出标记读取 以渲染每个状态的内线.useNodes- 备用节点的密钥地图.useNodeControls编号 :useNodesControls- 刷新,驱逐,并释放 不使节点.usePublish- 在一个频道发布输入信号.Preload- 在生孩子前先得到节点.getErrorReport编号 :getErrorRecovery- 项目运行时间读取错误到 UI 错误边界 .
测试
import * as FrondReactTest from "@frondruntime/react/testing";
测试子路径导出 TestFrondProvider 反应测试需要一个单独的运行时间.
移动
从0.4.0升级? 见核心软件包 移民-0.5.md 用于错误报告更改,包括已贬值的预测字段.
从0.1.0升级? 见核心软件包 移民-0.2.md - 它覆盖了共享作者的更改和反应-变换类型.
文档
- 反应提供者 : https://frondrundruntime.dev/docs/resact/producer 页面存档备份,存于互联网档案馆
- 使用节点 : https://frondruntime.dev/docs/react/use-node 页面存档备份,存于互联网档案馆
- 悬疑和错误 : https://frondruntime.dev/docs/react/suspense-and-errors (中文(简体) )
大赦国际的使用
Frond是AI辅助(主要是Claude和Codex),在数月内被反复使用,而不是一发生成. 全注: https://frondruntime.dev/ai-use (英语)