# @alpha2-sh/react 中文文档

规范地址：https://npmcn.com/package/%40alpha2-sh/react/

版本：0\.5\.3
npm 元数据更新时间：2026-11-04T23:25:11.163Z
中文译文更新时间：2026-11-06T16:36:14.947Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：17 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18，alpha2 0\.5\.3
- 首次发布：2026-10-19T20:36:03.156Z
- 最新版本发布：2026-11-04T23:25:10.795Z
- 近 30 天下载量：2729（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 19 个）

## 中文简介

用于 alpha2 浏览器播放器的回放画布 .

## 安装

```sh
npm install @alpha2-sh/react
```

也可以使用：`pnpm add @alpha2-sh/react`、`yarn add @alpha2-sh/react`、`bun add @alpha2-sh/react`

## README

# @alpha2-sh/反应

反应画布 [`alpha2`](https://github.com/alpha2-sh/alpha2/blob/main/packages/alpha2/README.md) 浏览器播放器 .

## 安装

```sh
npm install @alpha2-sh/react alpha2
```

`alpha2` (与本软件包的同版本)和回放 18 或后作为对等依赖.

## `Alpha2Canvas`

```jsx
import { useCallback } from "react";
import { Alpha2Canvas } from "@alpha2-sh/react";
import { Alpha2Player } from "alpha2/player";
import { WorkerRenderBackend } from "alpha2/worker";

function Preview({ workerUrl, refill, time }) {
  // A new function makes a new player: keep it stable.
  const createPlayer = useCallback(
    (replaceSurface) =>
      new Alpha2Player(new WorkerRenderBackend(new Worker(workerUrl, { type: "module" })), {
        onRefill: refill,
        replaceSurface,
      }),
    [workerUrl, refill],
  );
  return <Alpha2Canvas createPlayer={createPlayer} timeTicks={time} width={1280} height={720} />;
}
```

`createPlayer` 做一个 `Alpha2Player` 从 `alpha2/player`在这里,一个制片工人(`alpha2/worker`),以及 `refill` 解码并上传演示文稿所缺少的框架. `replaceSurface` 让玩家从丢失的GPU恢复到一个新的画布上(一个丢失了的WebGL2上下文,或者在浏览器撤回了GPU访问后CPU的渲染器):组件将一个新的画布元素换入旧的,同一玩家借鉴了. 本部分绘制了 `width` 页:1 `height`,项目大小,并交给新玩家;它呈现 `timeTicks` 当它改变时, 并在画布消失时处理玩家 。 玩家属于一幅画布: React 可能不止一次设置组件(`<StrictMode>`, (中文(简体) ), `<Activity>`)),每次获得一款新画布和一款新玩家.

该元素保持了工程的宽度比并填充了容器的宽度. 虽然页面被隐藏,但它没有显示任何东西,它显示了页面再次可见的最新时间. 失败到 `onError`,或页的 `reportError` 没有它; `onReady` 财务报告和审定财务报表 `onPresented` 报告玩家的开始和每个演示文稿.

## `bindCanvas`

`bindCanvas(player, canvas, options)` 同一接线不包含 React : 它将画布传输给玩家并显示显示的时间(`binding.show(ticks)`) (中文(简体) ). 它既不制造也不处置玩家. 设置画布 `width` 财务报告和审定财务报表 `height` 在绑定之前, 以项目大小为准 。 与 `options.replaceCanvas` (把旧的画布换个大小相同的画布,然后用它来决定), `binding.replaceSurface()` 这是玩家的 `replaceSurface` 选项需要.

## 许可证

MIT,版权Alpha2贡献.

## 常见问题

### @alpha2-sh/react 是什么？

用于 alpha2 浏览器播放器的回放画布 \.

### 如何安装 @alpha2-sh/react？

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

### @alpha2-sh/react 支持 TypeScript 吗？

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

### @alpha2-sh/react 支持 ESM 还是 CommonJS？

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

### @alpha2-sh/react 可以商用吗？

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

### @alpha2-sh/react 的下载量有多少？

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

### @alpha2-sh/react 还在维护吗？

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