docs: make Chinese README the default

2026-07-13 10:10:00 +00:00
parent 431cd0626d
commit e01347b151
1 changed files with 49 additions and 43 deletions
@@ -1,45 +1,51 @@
+<!-- WEHUB_ZH_README -->
+> [!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 文件为准。
+
 # <img src="https://github.com/aidenybai/react-scan/blob/main/.github/assets/logo.svg" width="30" height="30" align="center" /> 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)
 <img
  src="https://github.com/user-attachments/assets/c21b3afd-c7e8-458a-a760-9a027be7dc02"
-  alt="React Scan in action"
+  alt="React Scan 运行演示"
  width="600"
 />

-## 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
 <!-- paste this BEFORE any scripts -->
@@ -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
 <!doctype 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 参考

 <details>
 <summary><code>Options</code></summary>
@@ -197,44 +203,44 @@ export interface Options {

 </details>

- `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
 <ExpensiveComponent onClick={() => 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) 开源软件。