Skip to content

Commit 6f279a2

Browse files
authored
docs(cn): translate react-compiler/incremental-adoption into Chinese (#1748)
2 parents 6dd7e21 + d29329a commit 6f279a2

File tree

3 files changed

+61
-95
lines changed

3 files changed

+61
-95
lines changed

.github/workflows/analyze.yml

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,6 @@ on:
1010
permissions: {}
1111

1212
jobs:
13-
event_type:
14-
runs-on: ubuntu-latest
15-
steps:
16-
- uses: actions/checkout@v3
17-
18-
- name: Save Event Type
19-
run: echo ${{ github.event_name }} > ./event_type
20-
21-
- name: Upload Event Type
22-
uses: actions/upload-artifact@v4
23-
with:
24-
path: ./event_type
25-
name: event_type
26-
2713
analyze:
2814
runs-on: ubuntu-latest
2915
steps:
@@ -75,7 +61,7 @@ jobs:
7561
if: success()
7662
with:
7763
workflow: analyze.yml
78-
branch: ${{ github.event.pull_request.base.ref || 'main' }}
64+
branch: ${{ github.event.pull_request.base.ref }}
7965
name: bundle_analysis.json
8066
path: .next/analyze/base/bundle
8167

@@ -93,7 +79,7 @@ jobs:
9379
# Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
9480
# entry in your package.json file.
9581
- name: Compare with base branch bundle
96-
if: success()
82+
if: success() && github.event.number
9783
run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
9884

9985
- name: Upload analysis comment
@@ -102,13 +88,6 @@ jobs:
10288
name: analysis_comment.txt
10389
path: .next/analyze/__bundle_analysis_comment.txt
10490

105-
number:
106-
runs-on: ubuntu-latest
107-
needs: analyze
108-
if: github.event_name == 'pull_request'
109-
steps:
110-
- uses: actions/checkout@v3
111-
11291
- name: Save PR number
11392
run: echo ${{ github.event.number }} > ./pr_number
11493

.github/workflows/analyze_comment.yml

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,11 @@ permissions:
1414
jobs:
1515
comment:
1616
runs-on: ubuntu-latest
17+
if: >
18+
${{ github.event.workflow_run.event == 'pull_request' &&
19+
github.event.workflow_run.conclusion == 'success' }}
1720
steps:
18-
- name: Download Event Type
19-
uses: dawidd6/action-download-artifact@v3
20-
with:
21-
workflow: analyze.yml
22-
run_id: ${{ github.event.workflow_run.id }}
23-
name: event_type
24-
path: event_type
25-
26-
- name: get type
27-
id: get-type
28-
run: |
29-
event_type=$(cat event_type/event_type)
30-
echo "event-type=$event_type" >> $GITHUB_OUTPUT
31-
3221
- name: Download base branch bundle stats
33-
if: github.event.workflow_run.conclusion == 'success' && steps.get-type.outputs.event-type == 'pull_request'
3422
uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
3523
with:
3624
workflow: analyze.yml
@@ -39,7 +27,6 @@ jobs:
3927
path: analysis_comment.txt
4028

4129
- name: Download PR number
42-
if: github.event.workflow_run.conclusion == 'success' && steps.get-type.outputs.event-type == 'pull_request'
4330
uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
4431
with:
4532
workflow: analyze.yml
@@ -49,7 +36,7 @@ jobs:
4936

5037
- name: Get comment body
5138
id: get-comment-body
52-
if: success() && github.event.workflow_run.conclusion == 'success' && steps.get-type.outputs.event-type == 'pull_request'
39+
if: success()
5340
run: |
5441
echo 'body<<EOF' >> $GITHUB_OUTPUT
5542
echo '' >> $GITHUB_OUTPUT

src/content/learn/react-compiler/incremental-adoption.md

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
11
---
2-
title: Incremental Adoption
2+
title: 逐步使用
33
---
44

55
<Intro>
6-
React Compiler can be adopted incrementally, allowing you to try it on specific parts of your codebase first. This guide shows you how to gradually roll out the compiler in existing projects.
6+
React Compiler 可以逐步采用,允许你首先在代码库的特定部分尝试使用。本指南将向你展示如何在现有项目中逐步推广该编译器的使用。
77
</Intro>
88

99
<YouWillLearn>
1010

11-
* Why incremental adoption is recommended
12-
* Using Babel overrides for directory-based adoption
13-
* Using the "use memo" directive for opt-in compilation
14-
* Using the "use no memo" directive to exclude components
15-
* Runtime feature flags with gating
16-
* Monitoring your adoption progress
11+
* 为何推荐增量式采用
12+
* 使用 Babel 覆写进行基于目录的采用
13+
* 使用 "use memo" 指令进行选择性编译
14+
* 使用 "use no memo" 指令排除组件
15+
* 带有 gating 的运行时特性标志
16+
* 监控你的采用进度
1717

1818
</YouWillLearn>
1919

20-
## Why Incremental Adoption? {/*why-incremental-adoption*/}
20+
## 为何采用渐进式迁移? {/*why-incremental-adoption*/}
2121

22-
React Compiler is designed to optimize your entire codebase automatically, but you don't have to adopt it all at once. Incremental adoption gives you control over the rollout process, letting you test the compiler on small parts of your app before expanding to the rest.
22+
React Compiler 的设计目的是自动优化你的整个代码库,但你不必一次性全部采用。渐进式采用让你能够控制推行过程,在扩展到其余部分之前,先在应用程序的小部分上测试编译器。
2323

24-
Starting small helps you build confidence in the compiler's optimizations. You can verify that your app behaves correctly with compiled code, measure performance improvements, and identify any edge cases specific to your codebase. This approach is especially valuable for production applications where stability is critical.
24+
从小处着手有助于建立对编译器优化的信心。你可以验证应用在编译代码下的行为是否正确,测量性能提升,并识别代码库中的任何特定边缘情况。这种方法对于稳定性至关重要的生产应用程序尤其有价值。
2525

26-
Incremental adoption also makes it easier to address any Rules of React violations the compiler might find. Instead of fixing violations across your entire codebase at once, you can tackle them systematically as you expand compiler coverage. This keeps the migration manageable and reduces the risk of introducing bugs.
26+
渐进式采用还使得更容易处理编译器可能发现的任何违反 React 规则的问题。你可以在扩展编译器覆盖范围的同时有条不紊地解决这些问题,而不是一次性修复整个代码库中的违规问题。这使迁移过程更易于管理,并降低了引入错误的风险。
2727

28-
By controlling which parts of your code get compiled, you can also run A/B tests to measure the real-world impact of the compiler's optimizations. This data helps you make informed decisions about full adoption and demonstrates the value to your team.
28+
通过控制代码中哪些部分被编译,你还可以运行 A/B 测试以衡量编译器优化在实际应用中的效果。这些数据有助于你做出是否全面采用的明智决策,并向团队展示其价值。
2929

30-
## Approaches to Incremental Adoption {/*approaches-to-incremental-adoption*/}
30+
## 渐进式采用的方法 {/*approaches-to-incremental-adoption*/}
3131

32-
There are three main approaches to adopt React Compiler incrementally:
32+
有三种主要方法可以逐步采用 React 编译器:
3333

34-
1. **Babel overrides** - Apply the compiler to specific directories
35-
2. **Opt-in with "use memo"** - Only compile components that explicitly opt in
36-
3. **Runtime gating** - Control compilation with feature flags
34+
1. **覆盖 Babel** - 将编译器应用于特定目录
35+
2. **通过 "use memo" 选择加入** - 仅编译明确选择加入的组件
36+
3. **运行时控制** - 通过功能标志控制编译
3737

38-
All approaches allow you to test the compiler on specific parts of your application before full rollout.
38+
所有方法都允许你在完全上线之前,在应用程序的特定部分上测试该编译器。
3939

40-
## Directory-Based Adoption with Babel Overrides {/*directory-based-adoption*/}
40+
## 基于目录的采用与 Babel 覆盖 {/*directory-based-adoption*/}
4141

42-
Babel's `overrides` option lets you apply different plugins to different parts of your codebase. This is ideal for gradually adopting React Compiler directory by directory.
42+
Babel`overrides` 选项允许你将不同的插件应用于代码库的不同部分。这对于逐步在各个目录中采用 React 编译器非常理想。
4343

44-
### Basic Configuration {/*basic-configuration*/}
44+
### 基本配置 {/*basic-configuration*/}
4545

46-
Start by applying the compiler to a specific directory:
46+
首先将编译器应用到特定目录:
4747

4848
```js
4949
// babel.config.js
@@ -62,9 +62,9 @@ module.exports = {
6262
};
6363
```
6464

65-
### Expanding Coverage {/*expanding-coverage*/}
65+
### 扩展覆盖范围 {/*expanding-coverage*/}
6666

67-
As you gain confidence, add more directories:
67+
随着你信心的增加,添加更多目录:
6868

6969
```js
7070
// babel.config.js
@@ -89,9 +89,9 @@ module.exports = {
8989
};
9090
```
9191

92-
### With Compiler Options {/*with-compiler-options*/}
92+
### 使用配置编译器选项 {/*with-compiler-options*/}
9393

94-
You can also configure compiler options per override:
94+
你还可以使用重写来配置编译器选项:
9595

9696
```js
9797
// babel.config.js
@@ -119,15 +119,15 @@ module.exports = {
119119
```
120120

121121

122-
## Opt-in Mode with "use memo" {/*opt-in-mode-with-use-memo*/}
122+
## 使用 "use memo" 的选择加入模式 {/*opt-in-mode-with-use-memo*/}
123123

124-
For maximum control, you can use `compilationMode: 'annotation'` to only compile components and hooks that explicitly opt in with the `"use memo"` directive.
124+
如需最大程度的控制,你可以使用 `compilationMode: 'annotation'`,仅编译那些通过 `"use memo"` 指令显式选择加入的组件和 Hook。
125125

126126
<Note>
127-
This approach gives you fine-grained control over individual components and hooks. It's useful when you want to test the compiler on specific components without affecting entire directories.
127+
这种方法可以让你对各个组件和挂钩进行细粒度的控制。当你希望在不影响整个目录的情况下,针对特定组件测试编译器时,这种方法非常有用。
128128
</Note>
129129

130-
### Annotation Mode Configuration {/*annotation-mode-configuration*/}
130+
### 选择加入模式配置 {/*annotation-mode-configuration*/}
131131

132132
```js
133133
// babel.config.js
@@ -140,9 +140,9 @@ module.exports = {
140140
};
141141
```
142142

143-
### Using the Directive {/*using-the-directive*/}
143+
### 选择加入指令 {/*using-the-directive*/}
144144

145-
Add `"use memo"` at the beginning of functions you want to compile:
145+
在要编译的函数开头添加 `"use memo"`
146146

147147
```js
148148
function TodoList({ todos }) {
@@ -166,22 +166,22 @@ function useSortedData(data) {
166166
}
167167
```
168168

169-
With `compilationMode: 'annotation'`, you must:
170-
- Add `"use memo"` to every component you want optimized
171-
- Add `"use memo"` to every custom hook
172-
- Remember to add it to new components
169+
使用 `compilationMode: 'annotation'` 时,你必须:
170+
- 在每个需要优化的组件中添加 `"use memo"`
171+
- 在每个自定义 Hook 中添加 `"use memo"`
172+
- 记得在新组件中也添加它
173173

174-
This gives you precise control over which components are compiled while you evaluate the compiler's impact.
174+
这可以在你评估编译器影响的同时,精确控制哪些组件会被编译。
175175

176-
## Runtime Feature Flags with Gating {/*runtime-feature-flags-with-gating*/}
176+
## 运行时控制 {/*runtime-feature-flags-with-gating*/}
177177

178-
The `gating` option enables you to control compilation at runtime using feature flags. This is useful for running A/B tests or gradually rolling out the compiler based on user segments.
178+
`gating`选项使你能够在运行时使用功能标志控制编译。这对于运行 A/B 测试或根据用户细分逐步推出编译器非常有用。
179179

180-
### How Gating Works {/*how-gating-works*/}
180+
### 运行时控制工作原理 {/*how-gating-works*/}
181181

182-
The compiler wraps optimized code in a runtime check. If the gate returns `true`, the optimized version runs. Otherwise, the original code runs.
182+
编译器会在优化后的代码周围添加运行时检查。如果开关返回 `true`,则运行优化版本;否则运行原始代码。
183183

184-
### Gating Configuration {/*gating-configuration*/}
184+
### 控制配置 {/*gating-configuration*/}
185185

186186
```js
187187
// babel.config.js
@@ -197,9 +197,9 @@ module.exports = {
197197
};
198198
```
199199

200-
### Implementing the Feature Flag {/*implementing-the-feature-flag*/}
200+
### 实现功能标志 {/*implementing-the-feature-flag*/}
201201

202-
Create a module that exports your gating function:
202+
创建一个模块来导出你的门控函数:
203203

204204
```js
205205
// ReactCompilerFeatureFlags.js
@@ -209,17 +209,17 @@ export function isCompilerEnabled() {
209209
}
210210
```
211211

212-
## Troubleshooting Adoption {/*troubleshooting-adoption*/}
212+
## 故障排除 {/*troubleshooting-adoption*/}
213213

214-
If you encounter issues during adoption:
214+
如果在采用过程中遇到问题:
215215

216-
1. Use `"use no memo"` to temporarily exclude problematic components
217-
2. Check the [debugging guide](/learn/react-compiler/debugging) for common issues
218-
3. Fix Rules of React violations identified by the ESLint plugin
219-
4. Consider using `compilationMode: 'annotation'` for more gradual adoption
216+
1. 使用 `"use no memo"` 临时排除有问题的组件
217+
2. 查阅 [调试指南](/learn/react-compiler/debugging) 以了解常见问题
218+
3. 修复 ESLint 插件识别出的 React 规则违规
219+
4. 考虑使用 `compilationMode: 'annotation'` 以更渐进的方式采用
220220

221-
## Next Steps {/*next-steps*/}
221+
## 下一步 {/*next-steps*/}
222222

223-
- Read the [configuration guide](/reference/react-compiler/configuration) for more options
224-
- Learn about [debugging techniques](/learn/react-compiler/debugging)
225-
- Check the [API reference](/reference/react-compiler/configuration) for all compiler options
223+
- 阅读 [配置指南](/reference/react-compiler/configuration) 了解更多信息和选项
224+
- 学习 [调试技巧](/learn/react-compiler/debugging)
225+
- 查看 [API 参考](/reference/react-compiler/configuration) 获取所有编译器选项

0 commit comments

Comments
 (0)