You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/react-compiler/incremental-adoption.md
+55-55Lines changed: 55 additions & 55 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,49 +1,49 @@
1
1
---
2
-
title: Incremental Adoption
2
+
title: 逐步使用
3
3
---
4
4
5
5
<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.
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.
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.
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.
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.
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.
For maximum control, you can use `compilationMode: 'annotation'` to only compile components and hooks that explicitly opt in with the `"use memo"`directive.
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.
Add`"use memo"` at the beginning of functions you want to compile:
145
+
在要编译的函数开头添加`"use memo"`:
146
146
147
147
```js
148
148
functionTodoList({ todos }) {
@@ -166,22 +166,22 @@ function useSortedData(data) {
166
166
}
167
167
```
168
168
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
+
-记得在新组件中也添加它
173
173
174
-
This gives you precise control over which components are compiled while you evaluate the compiler's impact.
174
+
这可以在你评估编译器影响的同时,精确控制哪些组件会被编译。
175
175
176
-
## Runtime Feature Flags with Gating {/*runtime-feature-flags-with-gating*/}
176
+
## 运行时控制 {/*runtime-feature-flags-with-gating*/}
177
177
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.
0 commit comments