diff --git a/README.md b/README.md index cced77e..d530a5d 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,51 @@ + +> [!NOTE] +> 本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。 +> [English](./README.en.md) · [原始项目](https://github.com/aidenybai/react-scan) · [上游 README](https://github.com/aidenybai/react-scan/blob/HEAD/README.md) +> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。 + # React Scan -React Scan automatically detects performance issues in your React app. +React Scan 会自动检测 React 应用中的性能问题。 -- Requires no code changes -- just drop it in -- Highlights exactly the components you need to optimize -- Always accessible through a toolbar on page +- 无需修改代码 —— 只需引入即可 +- 精确高亮你需要优化的组件 +- 通过页面工具栏随时可用 -### Quick Start +### 快速开始 ```bash npx -y react-scan@latest init ``` -### [**Try out a demo! →**](https://react-scan.million.dev) +### [**试用演示！→**](https://react-scan.million.dev) React Scan in action -## Install +## 安装 -The `init` command will automatically detect your framework, install `react-scan` via npm, and set up your project. +`init` 命令会自动检测你的框架，通过 npm 安装 `react-scan`，并完成项目配置。 ```bash npx -y react-scan@latest init ``` -### Manual Installation +### 手动安装 -Install the package: +安装该包： ```bash npm install -D react-scan ``` -Then add the script tag to your app. Pick the guide for your framework: +然后将 script 标签添加到你的应用中。请选择适用于你框架的指南： -#### Script Tag +#### Script 标签 -Paste this before any scripts in your `index.html`: +在任何脚本之前，将以下内容粘贴到你的 `index.html` 中： ```html @@ -51,7 +57,7 @@ Paste this before any scripts in your `index.html`: #### Next.js (App Router) -Add this inside of your `app/layout.tsx`: +将以下内容添加到你的 `app/layout.tsx` 中： ```tsx import Script from "next/script"; @@ -74,7 +80,7 @@ export default function RootLayout({ children }) { #### Next.js (Pages Router) -Add this into your `pages/_document.tsx`: +将以下内容添加到你的 `pages/_document.tsx` 中： ```tsx import { Html, Head, Main, NextScript } from "next/document"; @@ -101,7 +107,7 @@ export default function Document() { #### Vite -Example `index.html` with React Scan enabled: +启用 React Scan 的 `index.html` 示例： ```html @@ -121,7 +127,7 @@ Example `index.html` with React Scan enabled: #### Remix -Add this inside your `app/root.tsx`: +将以下内容添加到你的 `app/root.tsx` 中： ```tsx import { Links, Meta, Outlet, Scripts } from "@remix-run/react"; @@ -146,11 +152,11 @@ export default function App() { } ``` -### Browser Extension +### 浏览器扩展 -Install the extension by following the guide [here](https://github.com/aidenybai/react-scan/blob/main/BROWSER_EXTENSION_GUIDE.md). +按照[此处](https://github.com/aidenybai/react-scan/blob/main/BROWSER_EXTENSION_GUIDE.md). 的指南安装扩展。 -## API Reference +## API 参考
Options @@ -197,44 +203,44 @@ export interface Options {
-- `scan(options: Options)`: Imperative API to start scanning -- `useScan(options: Options)`: Hook API to start scanning -- `setOptions(options: Options): void`: Set options at runtime -- `getOptions()`: Get the current options -- `onRender(Component, onRender: (fiber: Fiber, render: Render) => void)`: Hook into a specific component's renders +- `scan(options: Options)`：用于启动扫描的命令式 API（Imperative API） +- `useScan(options: Options)`：用于启动扫描的 Hook API +- `setOptions(options: Options): void`：在运行时设置选项 +- `getOptions()`：获取当前选项 +- `onRender(Component, onRender: (fiber: Fiber, render: Render) => void)`：接入特定组件的渲染 -## Why React Scan? +## 为什么选择 React Scan？ -React can be tricky to optimize. +React 优化可能很棘手。 -The issue is that component props are compared by reference, not value. This is intentional -- rendering can be cheap to run. +问题在于组件 props 是按引用（reference）而非值（value）进行比较的。这是有意为之 —— 渲染本身的执行成本可以很低。 -However, this makes it easy to accidentally cause unnecessary renders, making the app slow. Even production apps with hundreds of engineers can't fully optimize their apps (see [GitHub](https://github.com/aidenybai/react-scan/blob/main/.github/assets/github.mp4), [Twitter](https://github.com/aidenybai/react-scan/blob/main/.github/assets/twitter.mp4), and [Instagram](https://github.com/aidenybai/react-scan/blob/main/.github/assets/instagram.mp4)). +然而，这也容易意外引发不必要的渲染，从而让应用变慢。即使是拥有数百名工程师的生产级应用，也无法完全优化（参见 [GitHub](https://github.com/aidenybai/react-scan/blob/main/.github/assets/github.mp4), [Twitter](https://github.com/aidenybai/react-scan/blob/main/.github/assets/twitter.mp4), 和 [Instagram](https://github.com/aidenybai/react-scan/blob/main/.github/assets/instagram.mp4)). ```jsx alert("hi")} style={{ color: "purple" }} /> ``` -React Scan helps you identify these issues by automatically detecting and highlighting renders that cause performance issues. +React Scan 通过自动检测并高亮导致性能问题的渲染，帮助你识别这些问题。 -## Resources & Contributing +## 资源与贡献 -Want to try it out? Check the [demo](https://react-scan.million.dev). +想试用一下？查看[演示](https://react-scan.million.dev). -Looking to contribute? Check the [Contributing Guide](https://github.com/aidenybai/react-scan/blob/main/CONTRIBUTING.md). +想要贡献代码？查看[贡献指南](https://github.com/aidenybai/react-scan/blob/main/CONTRIBUTING.md). -Want to talk to the community? Join our [Discord](https://discord.gg/X9yFbcV2rF). +想与社区交流？加入我们的 [Discord](https://discord.gg/X9yFbcV2rF). -Find a bug? Head to our [issue tracker](https://github.com/aidenybai/react-scan/issues). +发现了 bug？前往我们的[问题追踪器](https://github.com/aidenybai/react-scan/issues). -[**→ Start contributing on GitHub**](https://github.com/aidenybai/react-scan/blob/main/CONTRIBUTING.md) +[**→ 在 GitHub 上开始贡献**](https://github.com/aidenybai/react-scan/blob/main/CONTRIBUTING.md) -## Acknowledgments +## 致谢 -- [React Devtools](https://react.dev/learn/react-developer-tools) for the initial idea of highlighting renders -- [Million Lint](https://million.dev) for scanning and linting approaches -- [Why Did You Render?](https://github.com/welldone-software/why-did-you-render) for the concept of detecting unnecessary renders +- [React Devtools](https://react.dev/learn/react-developer-tools)：高亮渲染的最初灵感来源 +- [Million Lint](https://million.dev)：扫描与 lint 方案 +- [Why Did You Render?](https://github.com/welldone-software/why-did-you-render)：检测不必要渲染的概念 -## License +## 许可证 -React Scan is [MIT-licensed](LICENSE) open-source software by Aiden Bai, [Million Software, Inc.](https://million.dev), and [contributors](https://github.com/aidenybai/react-scan/graphs/contributors). +React Scan 是由 Aiden Bai、[Million Software, Inc.](https://million.dev), 和[贡献者](https://github.com/aidenybai/react-scan/graphs/contributors). 开发的 [MIT-licensed](LICENSE) 开源软件。