# @cmocanu/react-render-tracker 中文文档

规范地址：https://npmcn.com/package/%40cmocanu/react-render-tracker/

版本：0\.7\.8
npm 元数据更新时间：2024-12-20T19:33:46.124Z
中文译文更新时间：2026-11-10T04:14:17.083Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：1.7 MB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2024-12-03T15:54:55.825Z
- 最新版本发布：2024-12-20T19:33:45.956Z
- 近 30 天下载量：3144（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

React 渲染跟踪器 - 一个发现与意外重交有关的性能问题的工具

## 安装

```sh
npm install @cmocanu/react-render-tracker
```

也可以使用：`pnpm add @cmocanu/react-render-tracker`、`yarn add @cmocanu/react-render-tracker`、`bun add @cmocanu/react-render-tracker`

## README

[![NPM version](https://img.shields.io/npm/v/react-render-tracker.svg)](https://www.npmjs.com/package/react-render-tracker)

# 反射渲染跟踪器

React Render Tracker – 一个发现与出乎意料的再交付相关的性能问题的工具.

React Render Tracker (RRT) 呈现了一段时间内组件的树状状态,以及一个与所选组件(纤维)或其子树相关的事件日志. 它并没有提供组件的完整状态,而是它们之间的区别. 它不是React Devtools的取而代之的取而代之,而是以对app的组件树(如挂载,更新和卸载等)的变化及其成因的调查为重点对它的赞美.

[React Render Tracker v. 6. – 概览和指令](https://github.com/lahmatiy/react-render-tracker/files/7963996/React.Render.Tracker.overview.rev.nov.23.2021.pdf)

支持的 React v16.9+(对 React 开发构建完全有效,但对于剖析和生产构建,它并没有捕获一些数据,见 [25号问题](https://github.com/lahmatiy/react-render-tracker/issues/25)(中文(简体) )

![Demo](https://github.com/lahmatiy/react-render-tracker/assets/270491/f57ca526-c80c-481c-b701-542a95e8d20c)

特征 :

-   组件树的状态随时间演变,包括未挂载的组件(可以通过右上角的切换来隐藏)和更新次数(重新提交)
-   两类组件的树级:基于所有者(如何创建组件,更好用于更新跟踪,默认选择)和基于父系统(如何安装组件)
-   用于选定纤维的道具更新和救援的矩阵
-   显示在上下文使用钩读取的纤维和位置上所用的上下文
-   显示提供者纤维的消费者列表
-   关于选定纤维使用Memo( ) 和使用Callback( ) 钩的使用和重算的详情
-   选定组件的事件日志(可选择包含子树组件的事件),由 React 的批次工作(承诺)分组,详细介绍上下文、状态和道具的变化
-   显示哪个组件( 纤维) 负责选定组件的更新
-   自我和子树渲染时间( 默认隐藏, 使用切换到右上角以启用)
-   在编辑器中打开源位置
-   状态栏内事件和组成部分实例的总体统计数据
-   API 用于获取和处理捕获的数据 [浏览器](https://npmcn.com/package/%40cmocanu/react-render-tracker/#readme-option-3--data-client-in-a-browser) 财务报告和审定财务报表 [无头浏览器框架](https://npmcn.com/package/%40cmocanu/react-render-tracker/#readme-option-4--data-client-in-a-headless-browser-framework)
-   接下来... (见 [路线图](https://github.com/lahmatiy/react-render-tracker/issues/6)(中文(简体) )

## 如何使用

你只需要再加一个 `<script>` 到 HTML 页面并打开用户界面检查您的 React app .

首先是 `<script>` 应在 React 应用程序前添加。 此脚本会给全局添加一个特殊对象, 用于为分析工具提供内部内容( React Devtools does the same) 。 一旦React库被加载并附在工具上,RT就开始收集React内部发生的事情的数据.

> 注:尚未支持同一页上的多个反应库实例。 在这种情况下,将只显示第一个连接的反相数据.

```html
<script src="http://localhost:3010/react-render-tracker.js" data-config="inpage:true"></script>
```

> 注:国家防范机制一揽子方案中捆绑的路径是: `dist/react-render-tracker.js`

您可以使用 CDN 服务来包含没有从国家预防机制安装的脚本 :

-   日记

```html
<script src="https://cdn.jsdelivr.net/npm/react-render-tracker"></script>
```

-   (单位:公斤)

```html
<script src="https://unpkg.com/react-render-tracker"></script>
```

下一步, 您需要打开用户界面或使用数据客户端 API, 这是最适合您的情况的方法之一 :

-   [选项 #0 – 在页面中打开 UI 右侧](https://npmcn.com/package/%40cmocanu/react-render-tracker/#readme-option-0--open-ui-right-in-the-page)
-   [选项 1 – 使用浏览器的守护工具](https://npmcn.com/package/%40cmocanu/react-render-tracker/#readme-option-1--using-with-browsers-devtools)
-   [选项 # 2 – 在其它标签、 浏览器或设备中打开 UI](https://npmcn.com/package/%40cmocanu/react-render-tracker/#readme-option-2--open-ui-in-another-tab-or-browser-or-device)
-   [选项 # 3 – 浏览器中的数据客户端](https://npmcn.com/package/%40cmocanu/react-render-tracker/#readme-option-3--data-client-in-a-browser)
-   [选项 # 4 – 无头浏览器框架中的数据客户端](https://npmcn.com/package/%40cmocanu/react-render-tracker/#readme-option-4--data-client-in-a-headless-browser-framework)

### 选项 #0 – 在页面中打开 UI 右侧

为避免任何额外的安装,您只需添加 `data-config="inpage:true"` 属性 `<script>`。在这种情况下,将在您的应用程序页面中右侧显示UI。 这是在动作中尝试React Render Tracker最简单的方法. 然而, UI 将以与您的 React 应用程序相同的线程执行, 从大尺度应用程序的性能角度来说, 这可能不是一个好选项 .

```html
<script
  src="https://cdn.jsdelivr.net/npm/react-render-tracker"
  data-config="inpage:true"
></script>
```

### 选项 1 – 使用浏览器的守护工具

1.  安装 Rempl 扩展 [铬](https://chrome.google.com/webstore/detail/rempl/hcikjlholajopgbgfmmlbmifdfbkijdj) 基于浏览器或 [用于 Firefox 的](https://addons.mozilla.org/en-US/firefox/addon/rempl/) (稍后可能会添加其他浏览器)
    
2.  打开您的 React app 的位置, 然后打开浏览器的devtools, 并在这里找到 Rempl 标签 。 点击它。 就是这样.
    

> 注:如果在安装 Rempl 扩展之前打开了您的 React 应用程序和浏览器的devtool,则需要关闭并打开浏览器的devtool,以及用 React 应用程序重新加载页面.

### 选项 # 2 – 在其它标签、 浏览器或设备中打开 UI

使用 React Render Tracker 远程检查您的 React app 最通用的方法是通过一个特殊的服务器,作为该app和 React Render Tracker UI之间的连接点. 由于难民审查法庭基于 [缩写](https://github.com/rempl/rempl),它的作用为 [rempl- cli 语句](https://github.com/rempl/rempl-cli) 用来发射这种服务器。 在这种情况下,可以检查在任何网页视图中推出的有WebSocket支持的React应用程序. 事实上,你可以检查在浏览器中运行的React应用程序,没有devtools支持,或者Electron,或者VS代码等.

1.  按照命令运行 :

```
> npm install -g rempl-cli
> rempl
```

这将在端口启动 Rempl 服务器 `8177`启用 `--port` 选项以指定任何其他端口。 查看更多选项 `rempl --help` 命令.

2.  添加 `<meta>` 标记带有 Rempl 服务器指定来源 :

```html
<meta name="rempl:server" content="localhost:8177" />
```

3.  打开你的申请 在您选择的常绿浏览器中打开 Rempl 服务器位置, 例如 . `http://localhost:8177` 这是默认的 URL。 您应该看到连接的 React Render Tracker 实例, 选择一个来查看 UI .

> 注:在MVP相相交叉浏览器支持期间,不能保证. 如果某事在您使用的非铬浏览器中不起作用,请随意打开一个问题.

### 选项 # 3 – 浏览器中的数据客户端

这个 `react-render-tracker/data-client` 模块提供JavaScript API(数据客户端)与React Render Tracker互动.

```html
<script src="path/to/react-render-tracker.js"></script>
<script type="module">
  import * as rrt from "react-render-tracker/data-client";

  await rrt.isReady(); // resolves when data client is connected to React Render Tracker

  // ...

  const capturedEvents = await rrt.getEvents();
</script>
```

参见示例 [这里](https://npmcn.com/package/%40cmocanu/react-render-tracker/playground/data-client-example.js)。 。 。 .

数据客户端 API :

> 注:数据客户端API目前非常基本,可更改。 考虑一下 **实验**欢迎您的反馈.

```ts
// returns a promise that is resolving when data client is connected to RRT
async function isReady(): void;

// returns the state of data client connection to RRT
function isConnected(): boolean;

// returns an array of captured events
async function getEvents(offset = 0, limit = Infinity): Message[];

// return a number of captured events
async function getEventCount(): number;

// adds listener to the connection state changes, return a function to unsubscribe
function subscribeConnected(listener: (value: boolean) => void): () => {};

// adds listener to receive new captured events, return a function to unsubscribe;
// specifies the index from which to consider events as new, by default it's all
// non-captured events; set to 0 to receieve all the events;
function subscribeNewEvents(
  callback: (newEvents: Message[]) => void,
  offset = events.length
): () => {};
```

### 选项 # 4 – 无头浏览器框架中的数据客户端

这个 `react-render-tracker/headless-browser-client` 模块提供了用于无头浏览器框架的适配器,该适配器适用于页面对象,以便在页面上下文中获取数据客户端 API。 支助框架:

-   [剧作家](https://github.com/microsoft/playwright) (见 [实例](https://npmcn.com/package/%40cmocanu/react-render-tracker/examples/playwright/script.mjs)(中文(简体) )
-   [傀儡](https://github.com/puppeteer/puppeteer) (见 [实例](https://npmcn.com/package/%40cmocanu/react-render-tracker/examples/puppeteer/script.js)(中文(简体) )

```js
import { chromium } from "playwright"; // or import puppeteer from "puppeteer";
import newTrackerClient from "react-render-tracker/headless-browser-client";

const browser = chromium.launch();
const page = await browser.newPage();
const rrt = await newTrackerClient(page);

await page.goto("https://example.com");

const capturedEvents = await rrt.getEvents();
```

## 配置重播跟踪器

重放 Render 跟踪器可以通过属性配置 `data-config` 打开 `<script>` 元素 :

```html
<script
  src="path/to/react-render-tracker.js"
  data-config="...options goes here..."
></script>
```

### 页面

类型 : `boolean`  
默认 : `false`

打开初始化工具的页面主机 `true`。 。 。 .

### 打开源代码

类型 : `string` | `object` | `undefined`  
默认 : `undefined`

允许启用“ 在编辑器中打开” 功能, 当值是 `undefined` (默认). 选项的值应该是一个对象,形状如下(所有条目都是可选的,但 `pattern`:

```js
{
  pattern: 'string',     // required
  projectRoot: 'string', // optional
  basedir: 'string',     // optional
  basedirJsx: 'string'   // optional
}
```

地点:

-   `pattern` - 定义由源位置链接点击获取的 URL 。 这种 URL 应该是“ 在编辑器中打开” 动作的网络服务器的终点 。 对于 `Visual Studio Code` 不需要网络服务器(见下文).
-   `projectRoot` – 工程目录的绝对路径, 任何位置都会附加在它上 .
-   `basedir` - 相对于项目目录的路径,用于解决相对路径(即包含 `..`) 之后添加到 `projectRoot`。 。 。 .
-   `basedirJsx` - 与 `basedir` 但针对JSX地点(即:. `__source` 关于JSX要素的道具价值; `basedir` 值用于 `basedirJsx` 未指定.

如果你的编辑是 `Visual Studio Code`,可以在没有网络服务器的情况下设置"打开编辑器"功能,比如:

```html
<script
  src="https://cdn.jsdelivr.net/npm/react-render-tracker"
  data-config="
    openSourceLoc: {
      pattern: 'vscode://file/[file]',
      projectRoot: '/Users/username/git/project-name'
    }
  "
></script>
```

当字符串值被传递时 `openSourceLoc` 选项将其替换为对象 `{ pattern: stringValue }`,也就是说.

```js
openSourceLoc: "url pattern";
// the same as ->
openSourceLoc: {
  pattern: "url pattern";
}
```

这个 `pattern`其值可能包含替换值的占位符 :

-   `[filepath]` - 一个模块的绝对解析位置,例如:. `/Users/username/git/project/src/module.js`
-   `[file]` 或者说 `[loc]` - 与 `[filepath]`,但包含行和列(与 `[filepath]:[line]:[column]`),例如. `/Users/username/git/project/src/module.js:12:5`
-   `[line]` - 模块源中的位置线(从 1 开始)
-   `[column]` - 模块源中位置一栏(从 1起)
-   `[line0]` - 模块源头零基位置线
-   `[column0]` — 模块源中零基位置一栏

## 使用自定义构建/ dev 版本

-   使用 Clone 重播和安装道克 `npm install`
-   使用 Dev 服务器运行 `npm start` 包含 `<script>` 包含服务器主机 :

```html
<script src="http://localhost:3000/react-render-tracker.js"></script>
```

Dev 服务器提供以下端点:

-   `/react-render-tracker.js` — 不包含 RRT 的 Dev 构建, UI 部分( 订阅者) (其内容是通过获取请求加载)
-   `/publisher.js` - 与 `/react-render-tracker.js`
-   `/subscriber.js` -UI是工具的一部分, `/react-render-tracker.js` 正在引用此脚本将 UI 装入回放沙盒
-   `/rrt-data-client.js` — 仅限数据的客户端 API(参见 [备选案文3](https://npmcn.com/package/%40cmocanu/react-render-tracker/#readme-option-3--data-client-in-a-browser)(中文(简体) )
-   `/dist/react-render-tracker.js` - 与 `/dist/react-render-tracker.js` 由包件提供, `publisher` 财务报告和审定财务报表 `subscriber` 以单一脚本捆绑
-   `/dist/data-client.js` - 与 `/dist/data-client.js` 软件包提供的

> 注:在这种情况下,将按对脚本的要求重建捆绑。 此版本的捆绑包含可用于调试的源地图

作为选择,你可以运行 `npm run build` 以获得捆绑 `dist` 文件夹( e)`dist/react-render-tracker.js`(中文(简体) )

> 注:这个捆绑版与出版版相同(已缩小,不包括原始地图)

## 如何在当地开始操场

```
npm install
npm start
```

打开将在控制台显示的 URL( 例如) . `Server listen on http://localhost:3000`) (中文(简体) ).

## 承认

React Render Tracker的原型由微软于2021年7月的黑客赛事中设计而来. 多亏了为此而努力的团队:达纳·雅诺斯科娃 (@DJanoskova),德米特里·萨姆索诺夫 (@user1736),尤里·托米林 (@r04423),马克西姆·哈尔琴科 (@Bon4ik)和拉卢卡·瓦西里乌 (@kubayaya).

多亏了React Devtools的作者,这些作者与React 内部集成成为React Render Tracker中集成执行的基础.

## 许可证

麻省理工学院

## 常见问题

### @cmocanu/react-render-tracker 是什么？

React 渲染跟踪器 - 一个发现与意外重交有关的性能问题的工具

### 如何安装 @cmocanu/react-render-tracker？

在项目目录运行 npm install @cmocanu/react-render-tracker，或使用 pnpm add / yarn add / bun add。

### @cmocanu/react-render-tracker 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/cmocanu\_\_react-render-tracker 是否存在。

### @cmocanu/react-render-tracker 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @cmocanu/react-render-tracker 可以商用吗？

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

### @cmocanu/react-render-tracker 的下载量有多少？

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

### @cmocanu/react-render-tracker 还在维护吗？

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