反射渲染跟踪器

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

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

React Render Tracker v. 6. – 概览和指令

支持的 React v16.9+(对 React 开发构建完全有效,但对于剖析和生产构建,它并没有捕获一些数据,见 25号问题(中文(简体) )

特征 :

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

如何使用

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

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

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

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

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

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

• 日记

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

• (单位:公斤)

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

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

• 选项 #0 – 在页面中打开 UI 右侧
• 选项 1 – 使用浏览器的守护工具
• 选项 # 2 – 在其它标签、 浏览器或设备中打开 UI
• 选项 # 3 – 浏览器中的数据客户端
• 选项 # 4 – 无头浏览器框架中的数据客户端

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

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

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

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

1. 安装 Rempl 扩展 铬 基于浏览器或 用于 Firefox 的 (稍后可能会添加其他浏览器)

2. 打开您的 React app 的位置, 然后打开浏览器的devtools, 并在这里找到 Rempl 标签 。 点击它。 就是这样.

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

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

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

1. 按照命令运行 :

> npm install -g rempl-cli
> rempl

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

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

<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互动.

<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>

参见示例 这里。 。 。 .

数据客户端 API :

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

// 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。 支助框架:

• 剧作家 (见 实例(中文(简体) )
• 傀儡 (见 实例(中文(简体) )

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> 元素 :

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

页面

类型 : boolean
默认 : false

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

打开源代码

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

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

{
  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,可以在没有网络服务器的情况下设置"打开编辑器"功能,比如:

<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 },也就是说.

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> 包含服务器主机 :

<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(中文(简体) )
• /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中集成执行的基础.

许可证

麻省理工学院