wehub/aidenybai--react-scan

Fork 0

Files

T

wehub-resource-sync e01347b151

Publish Any Commit / build (22) (push) Has been cancelled

Details

docs: make Chinese README the default

2026-07-13 10:10:00 +00:00

6.3 KiB

Raw Blame History

Note

本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
English · 原始项目 · 上游 README
原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。

React Scan

React Scan 会自动检测 React 应用中的性能问题。

无需修改代码 —— 只需引入即可
精确高亮你需要优化的组件
通过页面工具栏随时可用

快速开始

npx -y react-scan@latest init

试用演示！→

安装

init 命令会自动检测你的框架，通过 npm 安装 react-scan，并完成项目配置。

npx -y react-scan@latest init

手动安装

安装该包：

npm install -D react-scan

然后将 script 标签添加到你的应用中。请选择适用于你框架的指南：

Script 标签

在任何脚本之前，将以下内容粘贴到你的 index.html 中：

<!-- paste this BEFORE any scripts -->
<script
  crossOrigin="anonymous"
  src="//unpkg.com/react-scan/dist/auto.global.js"
></script>

Next.js (App Router)

将以下内容添加到你的 app/layout.tsx 中：

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="//unpkg.com/react-scan/dist/auto.global.js"
          crossOrigin="anonymous"
          strategy="beforeInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Next.js (Pages Router)

将以下内容添加到你的 pages/_document.tsx 中：

import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <Script
          src="//unpkg.com/react-scan/dist/auto.global.js"
          crossOrigin="anonymous"
          strategy="beforeInteractive"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Vite

启用 React Scan 的 index.html 示例：

<!doctype html>
<html lang="en">
  <head>
    <script
      crossOrigin="anonymous"
      src="//unpkg.com/react-scan/dist/auto.global.js"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Remix

将以下内容添加到你的 app/root.tsx 中：

import { Links, Meta, Outlet, Scripts } from "@remix-run/react";

export default function App() {
  return (
    <html>
      <head>
        <Meta />
        <script
          crossOrigin="anonymous"
          src="//unpkg.com/react-scan/dist/auto.global.js"
        />
        <Links />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

浏览器扩展

按照此处. 的指南安装扩展。

API 参考

Options

export interface Options {
  /**
   * Enable/disable scanning
   * @default true
   */
  enabled?: boolean;

  /**
   * Force React Scan to run in production (not recommended)
   * @default false
   */
  dangerouslyForceRunInProduction?: boolean;

  /**
   * Log renders to the console
   * @default false
   */
  log?: boolean;

  /**
   * Show toolbar bar
   * @default true
   */
  showToolbar?: boolean;

  /**
   * Animation speed
   * @default "fast"
   */
  animationSpeed?: "slow" | "fast" | "off";

  onCommitStart?: () => void;
  onRender?: (fiber: Fiber, renders: Array<Render>) => void;
  onCommitFinish?: () => void;
}

scan(options: Options)：用于启动扫描的命令式 API（Imperative API）
useScan(options: Options)：用于启动扫描的 Hook API
setOptions(options: Options): void：在运行时设置选项
getOptions()：获取当前选项
onRender(Component, onRender: (fiber: Fiber, render: Render) => void)：接入特定组件的渲染

为什么选择 React Scan？

React 优化可能很棘手。

问题在于组件 props 是按引用（reference）而非值（value）进行比较的。这是有意为之 —— 渲染本身的执行成本可以很低。

然而，这也容易意外引发不必要的渲染，从而让应用变慢。即使是拥有数百名工程师的生产级应用，也无法完全优化（参见 GitHub, Twitter, 和 Instagram).

<ExpensiveComponent onClick={() => alert("hi")} style={{ color: "purple" }} />

React Scan 通过自动检测并高亮导致性能问题的渲染，帮助你识别这些问题。

资源与贡献

想试用一下？查看演示.

想要贡献代码？查看贡献指南.

想与社区交流？加入我们的 Discord.

发现了 bug？前往我们的问题追踪器.

→ 在 GitHub 上开始贡献

致谢

React Devtools：高亮渲染的最初灵感来源
Million Lint：扫描与 lint 方案
Why Did You Render?：检测不必要渲染的概念

许可证

React Scan 是由 Aiden Bai、Million Software, Inc., 和贡献者. 开发的 MIT-licensed 开源软件。

6.3 KiB Raw Blame History Unescape Escape