# @frondruntime/react 中文文档

规范地址：https://npmcn.com/package/%40frondruntime/react/

版本：0\.5\.0
npm 元数据更新时间：2026-10-22T12:04:11.552Z
中文译文更新时间：2026-11-15T14:40:08.868Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40frondruntime/react
原文对照：https://npmcn.com/package/%40frondruntime/react/?lang=original
项目主页：https://frondruntime.dev/
源码仓库：https://github.com/frondruntime/frond

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：195 kB，34 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：^20\.19\.0 \|\| \>=22\.12\.0
- 运行依赖：0 个
- peer 依赖：mobx \>=6 \<7，react \>=18，effect ^4\.0\.0，mobx-react-lite \>=4 \<5，@frondruntime/core 0\.5\.0
- 首次发布：2026-06-27T15:41:41.551Z
- 最新版本发布：2026-10-22T12:04:10.979Z
- 近 30 天下载量：3691（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 8 个）

## 中文简介

效果驱动的 Frond 运行时的反应适配器 .

## 安装

```sh
npm install @frondruntime/react
```

也可以使用：`pnpm add @frondruntime/react`、`yarn add @frondruntime/react`、`bun add @frondruntime/react`

## README

# @ frondruntime/反应

Frond的回放适配器:提供者,Suspense-ready节点钩,预装,控制,错误恢复,以及回放测试帮助器.

## 安装

```sh
bun add @frondruntime/core @frondruntime/react effect mobx mobx-react-lite
```

`@frondruntime/react` 取决于运行时间从 `@frondruntime/core`。 。 。 . `effect`, (中文(简体) ), `mobx`,以及 `react` 是同级运行时间合同。 读取可观测节点字段的组件应当使用 `observer` 从 `mobx-react-lite`。 。 。 .

## 提供者

```tsx
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>
  );
}
```

## 读取节点

```tsx
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` 准备状态中暂停,并将准备状态失败丢入最近的出错边界。 渲染路径只接收一个已准备好的作者节点实例 .

## 读取无悬念

```tsx
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` 将一个组件绑在一个信号信道,该信道的名称和有效载荷宣布:

```tsx
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` 无法通过建筑到达。 形状是 [调度器节点](https://npmcn.com/package/%40frondruntime/core/README.md#the-dispatcher-node)。频道、事件映射和订阅者看到的内容 [@ frondruntime/ core (中文(简体) )](https://npmcn.com/package/%40frondruntime/core/README.md#signals)。 。 。 .

## 周期钩

-   `useNode` - 准备节点或暂停/暂停.
-   `useNodeState` - 准备节点加操作状态、结果有效性和最后操作失败.
-   `useNodeRead` - 非扔出标记读取 以渲染每个状态的内线.
-   `useNodes` - 备用节点的密钥地图.
-   `useNodeControls` 编号 : `useNodesControls` - 刷新,驱逐,并释放 不使节点.
-   `usePublish` - 在一个频道发布输入信号.
-   `Preload` - 在生孩子前先得到节点.
-   `getErrorReport` 编号 : `getErrorRecovery` - 项目运行时间读取错误到 UI 错误边界 .

## 测试

```ts
import * as FrondReactTest from "@frondruntime/react/testing";
```

测试子路径导出 `TestFrondProvider` 反应测试需要一个单独的运行时间.

## 移动

从0.4.0升级? 见核心软件包 [移民-0.5.md](https://npmcn.com/package/%40frondruntime/core/MIGRATION-0.5.md) 用于错误报告更改,包括已贬值的预测字段.

从0.1.0升级? 见核心软件包 [移民-0.2.md](https://npmcn.com/package/%40frondruntime/core/MIGRATION-0.2.md) - 它覆盖了共享作者的更改和反应-变换类型.

## 文档

-   反应提供者 : [https://frondrundruntime.dev/docs/resact/producer 页面存档备份,存于互联网档案馆](https://frondruntime.dev/docs/react/provider)
-   使用节点 : [https://frondruntime.dev/docs/react/use-node 页面存档备份,存于互联网档案馆](https://frondruntime.dev/docs/react/use-node)
-   悬疑和错误 : [https://frondruntime.dev/docs/react/suspense-and-errors (中文(简体) )](https://frondruntime.dev/docs/react/suspense-and-errors)

## 大赦国际的使用

Frond是AI辅助(主要是Claude和Codex),在数月内被反复使用,而不是一发生成. 全注: [https://frondruntime.dev/ai-use (英语)](https://frondruntime.dev/ai-use)

## 常见问题

### @frondruntime/react 是什么？

效果驱动的 Frond 运行时的反应适配器 \.

### 如何安装 @frondruntime/react？

在项目目录运行 npm install @frondruntime/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：mobx（\>=6 \<7）、react（\>=18）、effect（^4\.0\.0）、mobx-react-lite（\>=4 \<5）、@frondruntime/core（0\.5\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @frondruntime/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @frondruntime/react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @frondruntime/react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^20\.19\.0 \|\| \>=22\.12\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @frondruntime/react 可以商用吗？

@frondruntime/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @frondruntime/react 的下载量有多少？

根据 npm 官方下载统计，@frondruntime/react 在 2026/10/16 – 2026/11/14 这 30 天内被下载 3,691 次，日均约 123 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @frondruntime/react 还在维护吗？

最新版本 0\.5\.0 发布于 2026/10/22（24 天前）；至今共发布 8 个版本，其中过去 12 个月发布了 8 个；首次发布于 2026/06/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。