Skip to content

Commit 46d4aa2

Browse files
authored
docs(cn): translate react-compiler/installation into Chinese (#1743)
2 parents dd66864 + 301b7dd commit 46d4aa2

File tree

2 files changed

+60
-60
lines changed

2 files changed

+60
-60
lines changed

src/content/learn/react-compiler/installation.md

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,60 @@
11
---
2-
title: Installation
2+
title: 安装
33
---
44

55
<Intro>
6-
This guide will help you install and configure React Compiler in your React application.
6+
本指南将帮助你在 React 应用程序中安装和配置 React Compiler。
77
</Intro>
88

99
<YouWillLearn>
1010

11-
* How to install React Compiler
12-
* Basic configuration for different build tools
13-
* How to verify your setup is working
11+
* 如何安装 React 编译器
12+
* 不同构建工具的基本配置
13+
* 如何验证你的设置是否正常工作
1414

1515
</YouWillLearn>
1616

17-
## Prerequisites {/*prerequisites*/}
17+
## 前提条件 {/*prerequisites*/}
1818

19-
React Compiler is designed to work best with React 19, but it also supports React 17 and 18. Learn more about [React version compatibility](/reference/react-compiler/target).
19+
React 编译器专为与 React 19 配合使用而设计,但也支持 React 17 18。了解有关 [React 版本兼容性](/reference/react-compiler/target) 的更多信息。
2020

2121
<Note>
22-
React Compiler is currently in RC. Install it using the `@rc` tag to get the latest release candidate version.
22+
React Compiler 当前处于 RC 阶段。请使用 `@rc` 标签安装,以获取最新的发布候选版本。
2323
</Note>
2424

25-
## Installation {/*installation*/}
25+
## 安装 {/*installation*/}
2626

27-
Install React Compiler as a `devDependency`:
27+
React 编译器安装为 `devDependency`
2828

2929
<TerminalBlock>
3030
npm install -D babel-plugin-react-compiler@rc
3131
</TerminalBlock>
3232

33-
Or with Yarn:
33+
或者使用 Yarn
3434

3535
<TerminalBlock>
3636
yarn add -D babel-plugin-react-compiler@rc
3737
</TerminalBlock>
3838

39-
Or with pnpm:
39+
或者使用 pnpm
4040

4141
<TerminalBlock>
4242
pnpm install -D babel-plugin-react-compiler@rc
4343
</TerminalBlock>
4444

45-
## Basic Setup {/*basic-setup*/}
45+
## 基本设置 {/*basic-setup*/}
4646

47-
React Compiler is designed to work by default without any configuration. However, if you need to configure it in special circumstances (for example, to target React versions below 19), refer to the [compiler options reference](/reference/react-compiler/configuration).
47+
React Compiler 默认无需任何配置即可工作。不过,如果你需要在特殊情况下进行配置(例如,要支持低于 19 版本的 React),请参考[编译器选项参考文档](/reference/react-compiler/configuration)
4848

49-
The setup process depends on your build tool. React Compiler includes a Babel plugin that integrates with your build pipeline.
49+
设置过程取决于你使用的构建工具。React Compiler 包含一个 Babel 插件,可以集成到你的构建流程中。
5050

5151
<Pitfall>
52-
React Compiler must run **first** in your Babel plugin pipeline. The compiler needs the original source information for proper analysis, so it must process your code before other transformations.
52+
React Compiler 必须在你的 Babel 插件管道中 **首先** 运行。编译器需要原始的源代码信息来进行正确的分析,因此它必须在其他转换操作之前处理你的代码。
5353
</Pitfall>
5454

5555
### Babel {/*babel*/}
5656

57-
Create or update your `babel.config.js`:
57+
创建或更新你的 `babel.config.js`
5858

5959
```js {3}
6060
module.exports = {
@@ -68,7 +68,7 @@ module.exports = {
6868

6969
### Vite {/*vite*/}
7070

71-
If you use Vite, you can add the plugin to vite-plugin-react:
71+
如果你使用 Vite,可以将插件添加到 vite-plugin-react 中:
7272

7373
```js {3,9}
7474
// vite.config.js
@@ -86,7 +86,7 @@ export default defineConfig({
8686
});
8787
```
8888

89-
Alternatively, if you prefer a separate Babel plugin for Vite:
89+
或者,如果你更倾向于为 Vite 使用一个独立的 Babel 插件:
9090

9191
<TerminalBlock>
9292
npm install -D vite-plugin-babel
@@ -112,10 +112,10 @@ export default defineConfig({
112112

113113
### Next.js {/*usage-with-nextjs*/}
114114

115-
Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information.
115+
更多信息请参考 [Next.js 文档](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler)
116116

117117
### React Router {/*usage-with-react-router*/}
118-
Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
118+
安装 `vite-plugin-babel`,并将其编译器的 Babel 插件添加到其中:
119119

120120
<TerminalBlock>
121121
{`npm install vite-plugin-babel`}
@@ -147,36 +147,36 @@ export default defineConfig({
147147

148148
### Webpack {/*usage-with-webpack*/}
149149

150-
A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
150+
社区开发的 webpack loader 现在可以从[这里](https://github.com/SukkaW/react-compiler-webpack)获取。
151151

152152
### Expo {/*usage-with-expo*/}
153153

154-
Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/) to enable and use the React Compiler in Expo apps.
154+
请参考 [Expo 文档](https://docs.expo.dev/guides/react-compiler/) 以了解如何在 Expo 应用中启用并使用 React 编译器。
155155

156156
### Metro (React Native) {/*usage-with-react-native-metro*/}
157157

158-
React Native uses Babel via Metro, so refer to the [Usage with Babel](#babel) section for installation instructions.
158+
React Native 通过 Metro 使用 Babel,因此请参考 [Babel 配合使用](#babel) 章节获取安装说明。
159159

160160
### Rspack {/*usage-with-rspack*/}
161161

162-
Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps.
162+
请参考 [Rspack 文档](https://rspack.dev/guide/tech/react#react-compiler) 以了解如何在 Rspack 应用中启用并使用 React 编译器。
163163

164164
### Rsbuild {/*usage-with-rsbuild*/}
165165

166-
Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps.
166+
请参考 [Rsbuild 文档](https://rsbuild.dev/guide/framework/react#react-compiler) 以了解如何在 Rsbuild 应用中启用并使用 React 编译器。
167167

168168

169169
## ESLint Integration {/*eslint-integration*/}
170170

171-
React Compiler includes an ESLint rule that helps identify code that can't be optimized. When the ESLint rule reports an error, it means the compiler will skip optimizing that specific component or hook. This is safe: the compiler will continue optimizing other parts of your codebase. You don't need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.
171+
React Compiler 包含一条 ESLint 规则,可帮助识别无法优化的代码。当 ESLint 规则报告错误时,意味着编译器将跳过对该特定组件或 Hook 的优化。这是安全的:编译器将继续优化代码库的其他部分。你不需要立即修复所有违规之处。可以按照自己的节奏逐步解决这些问题,以逐渐增加已优化组件的数量。
172172

173-
Install the ESLint plugin:
173+
安装 ESLint 插件:
174174

175175
<TerminalBlock>
176176
npm install -D eslint-plugin-react-hooks@rc
177177
</TerminalBlock>
178178

179-
Then enable the compiler rule in your ESLint configuration:
179+
然后在你的 ESLint 配置中启用编译器规则:
180180

181181
```js {3}
182182
// .eslintrc.js
@@ -187,32 +187,32 @@ module.exports = {
187187
};
188188
```
189189

190-
The ESLint rule will:
191-
- Identify violations of the [Rules of React](/reference/rules)
192-
- Show which components can't be optimized
193-
- Provide helpful error messages for fixing issues
190+
ESLint 规则将会:
191+
- 识别对 [React 规则](/reference/rules) 的违反情况
192+
- 显示哪些组件无法被优化
193+
- 提供有用的错误信息来帮助修复问题
194194

195-
## Verify Your Setup {/*verify-your-setup*/}
195+
## 验证你的设置 {/*verify-your-setup*/}
196196

197-
After installation, verify that React Compiler is working correctly.
197+
安装后,请验证 React 编译器是否正常工作。
198198

199-
### Check React DevTools {/*check-react-devtools*/}
199+
### 检查 React DevTools {/*check-react-devtools*/}
200200

201-
Components optimized by React Compiler will show a "Memo ✨" badge in React DevTools:
201+
由 React 编译器优化的组件会在 React DevTools 中显示一个 "Memo ✨" 徽章:
202202

203-
1. Install the [React Developer Tools](/learn/react-developer-tools) browser extension
204-
2. Open your app in development mode
205-
3. Open React DevTools
206-
4. Look for the ✨ emoji next to component names
203+
1. 安装 [React Developer Tools](/learn/react-developer-tools) 浏览器扩展
204+
2. 在开发模式下打开你的应用
205+
3. 打开 React DevTools
206+
4. 查看组件名称旁边的 ✨ 表情符号
207207

208-
If the compiler is working:
209-
- Components will show a "Memo ✨" badge in React DevTools
210-
- Expensive calculations will be automatically memoized
211-
- No manual `useMemo` is required
208+
如果编译器正在工作:
209+
- 组件将在 React DevTools 中显示一个 "Memo ✨" 徽章
210+
- 昂贵的计算将自动被记忆化
211+
- 无需手动使用 `useMemo`
212212

213-
### Check Build Output {/*check-build-output*/}
213+
### 检查构建输出 {/*check-build-output*/}
214214

215-
You can also verify the compiler is running by checking your build output. The compiled code will include automatic memoization logic that the compiler adds automatically.
215+
你还可以通过检查构建输出来验证编译器是否正在运行。编译后的代码将包含编译器自动添加的自动记忆化逻辑。
216216

217217
```js
218218
import { c as _c } from "react/compiler-runtime";
@@ -230,11 +230,11 @@ export default function MyApp() {
230230

231231
```
232232

233-
## Troubleshooting {/*troubleshooting*/}
233+
## 故障排除 {/*troubleshooting*/}
234234

235-
### Opting out specific components {/*opting-out-specific-components*/}
235+
### 排除特定组件 {/*opting-out-specific-components*/}
236236

237-
If a component is causing issues after compilation, you can temporarily opt it out using the `"use no memo"` directive:
237+
如果某个组件在编译后引发问题,可以使用 `"use no memo"` 指令暂时将其排除:
238238

239239
```js
240240
function ProblematicComponent() {
@@ -243,16 +243,16 @@ function ProblematicComponent() {
243243
}
244244
```
245245

246-
This tells the compiler to skip optimization for this specific component. You should fix the underlying issue and remove the directive once resolved.
246+
这会告诉编译器跳过对该特定组件的优化。你应该修复根本问题,并在解决后移除该指令。
247247

248-
For more troubleshooting help, see the [debugging guide](/learn/react-compiler/debugging).
248+
如需更多故障排除帮助,请参阅[调试指南](/learn/react-compiler/debugging)
249249

250-
## Next Steps {/*next-steps*/}
250+
## 下一步 {/*next-steps*/}
251251

252-
Now that you have React Compiler installed, learn more about:
252+
既然你已经安装了 React 编译器,可以进一步了解以下内容:
253253

254-
- [React version compatibility](/reference/react-compiler/target) for React 17 and 18
255-
- [Configuration options](/reference/react-compiler/configuration) to customize the compiler
256-
- [Incremental adoption strategies](/learn/react-compiler/incremental-adoption) for existing codebases
257-
- [Debugging techniques](/learn/react-compiler/debugging) for troubleshooting issues
258-
- [Compiling Libraries guide](/reference/react-compiler/compiling-libraries) for compiling your React library
254+
- [React 版本兼容性](/reference/react-compiler/target),适用于 React 17 18
255+
- [配置选项](/reference/react-compiler/configuration),用于自定义编译器
256+
- [渐进采用策略](/learn/react-compiler/incremental-adoption),用于现有的代码库
257+
- [调试技巧](/learn/react-compiler/debugging),用于排查问题
258+
- [编译库指南](/reference/react-compiler/compiling-libraries),用于编译你的 React

src/content/learn/react-compiler/introduction.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Introduction
2+
title: 介绍
33
---
44

55
<Intro>

0 commit comments

Comments
 (0)