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/introduction.md
+45-45Lines changed: 45 additions & 45 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,30 +3,30 @@ title: Introduction
3
3
---
4
4
5
5
<Intro>
6
-
React Compiler is a new build-time tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
*Debugging and troubleshooting when things go wrong
15
-
*Using the compiler on your React library
11
+
* React 编译器的作用
12
+
*如何开始使用该编译器
13
+
*渐进式采用策略
14
+
*出现问题时的调试与排查
15
+
*在你的 React 库中使用该编译器
16
16
17
17
</YouWillLearn>
18
18
19
19
<Note>
20
-
React Compiler is currently in Release Candidate (RC). We now recommend everyone to try the compiler and provide feedback. The latest RC release can be found with the `@rc`tag.
React Compiler automatically optimizes your React application at build time. React is often fast enough without optimization, but sometimes you need to manually memoize components and values to keep your app responsive. This manual memoization is tedious, easy to get wrong, and adds extra code to maintain. React Compiler does this optimization automatically for you, freeing you from this mental burden so you can focus on building features.
### After React Compiler {/*after-react-compiler*/}
53
+
### 在使用 React 编译器之后 {/*after-react-compiler*/}
54
54
55
-
With React Compiler, you write the same code without manual memoization:
55
+
使用 React 编译器，你可以编写相同的代码而无需手动进行记忆化：
56
56
57
57
```js
58
58
functionExpensiveComponent({ data, onClick }) {
@@ -72,23 +72,23 @@ function ExpensiveComponent({ data, onClick }) {
72
72
}
73
73
```
74
74
75
-
_[See this example in the React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)_
React Compiler's automatic memoization is primarily focused on **improving update performance** (re-rendering existing components), so it focuses on these two use cases:
React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_ — unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or`React.memo()`. For example, in the following example, `<MessageButton>`will re-render whenever `<FriendList>`'s state changes:
@@ -136,41 +136,41 @@ However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive
136
136
So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
137
137
</DeepDive>
138
138
139
-
## Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
We encourage everyone to start using React Compiler. While the compiler is still an optional addition to React today, in the future some features may require the compiler in order to fully work.
React Compiler is now in RC and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
145
+
React 编译器目前已进入 RC 阶段，并已在生产环境中进行了广泛测试。虽然像 Meta 这样的公司已经在生产中使用了它，但是否将编译器部署到你的应用程序生产环境，将取决于你的代码库状况以及你对 [React 规则](/reference/rules) 的遵循程度。
146
146
147
-
## What build tools are supported? {/*what-build-tools-are-supported*/}
147
+
## 支持哪些构建工具？ {/*what-build-tools-are-supported*/}
148
148
149
-
React Compiler can be installed across [several build tools](/learn/react-compiler/installation) such as Babel, Vite, Metro, and Rsbuild.
React Compiler is primarily a light Babel plugin wrapper around the core compiler, which was designed to be decoupled from Babel itself. While the initial stable version of the compiler will remain primarily a Babel plugin, we are working with the swc and[oxc](https://github.com/oxc-project/oxc/issues/10048)teams to build first class support for React Compiler so you won't have to add Babel back to your build pipelines in the future.
If you are using React Compiler,[`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and[`React.memo`](/reference/react/memo) can be removed. React Compiler adds automatic memoization more precisely and granularly than is possible with these hooks. If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component.
This is done out of caution as a common anti-pattern with manual memoization is using it for correctness. This means your app depends on specific values being memoized to work properly. For example, in order to prevent an infinite loop, you may have memoized some values to stop a `useEffect`call from firing. This breaks the Rules of React, but since it can potentially be dangerous for the compiler to automatically remove manual memoization, the compiler will just bail out instead. You should manually remove your handwritten memoization and verify that your app still works as expected.
In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler)for additional information and discussion about the compiler.
0 commit comments