Skip to content

Commit 50cd431

Browse files
committed
Unified React Compiler translate and add some translate
1 parent 78a4c02 commit 50cd431

File tree

10 files changed

+53
-53
lines changed

10 files changed

+53
-53
lines changed

src/content/blog/2024/05/22/react-conf-2024-recap.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ description: 上周我们在内华达州亨德森举办了为期两天的 React
1717

1818
---
1919

20-
在 React Conf 2024 上,我们宣布了 [React 19 RC](/blog/2024/12/05/react-19)[React Native 新架构 Beta 版](https://github.com/reactwg/react-native-new-architecture/discussions/189),以及 [React Compiler](/learn/react-compiler) 的实验版本。社区同时登台宣布了 [React Router v7](https://remix.run/blog/merging-remix-and-react-router)、Expo Router 中的 [通用服务器组件](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s)[RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs) 中的 React 服务器组件等等。
20+
在 React Conf 2024 上,我们宣布了 [React 19 RC](/blog/2024/12/05/react-19)[React Native 新架构 Beta 版](https://github.com/reactwg/react-native-new-architecture/discussions/189),以及 [React 编译器](/learn/react-compiler) 的实验版本。社区同时登台宣布了 [React Router v7](https://remix.run/blog/merging-remix-and-react-router)、Expo Router 中的 [通用服务器组件](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s)[RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs) 中的 React 服务器组件等等。
2121

2222
完整的 [第一天](https://www.youtube.com/watch?v=T8TZQ6k4SLE)[第二天](https://www.youtube.com/watch?v=0ckOUBiuxVY) 的直播已经可以在线观看了。在这篇文章中,我们将总结活动中的演讲和公告。
2323

@@ -45,12 +45,12 @@ _[点击这里观看第一天完整直播。](https://www.youtube.com/watch?v=T8
4545
- [为两台计算机设计的 React](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s),来自 [Dan Abramov](https://bsky.app/profile/danabra.mov)
4646
- [现在你应该理解了 React 服务器组件](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s),来自 [Kent C. Dodds](https://twitter.com/kentcdodds)
4747

48-
最后,[Joe Savona](https://twitter.com/en_JS)[Sathya Gunasekaran](https://twitter.com/_gsathya)[Mofei Zhang](https://twitter.com/zmofei) 宣布 React Compiler 现已 [开源](https://github.com/facebook/react/pull/29061),并分享了一个实验版本的 React Compiler 供大家尝试
48+
最后,[Joe Savona](https://twitter.com/en_JS)[Sathya Gunasekaran](https://twitter.com/_gsathya)[Mofei Zhang](https://twitter.com/zmofei) 宣布 React 编译器现已 [开源](https://github.com/facebook/react/pull/29061),并分享了一个实验版本的 React 编译器供大家尝试
4949

5050
有关使用 React Compile 及其工作原理的更多信息,请查看[文档](/learn/react-compiler)以及如下演讲:
5151

5252
- [忘了 Memo 吧](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=12020s),来自 [Lauren Tan](https://twitter.com/potetotes)
53-
- [深入解析 React Compiler](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=9313s),来自 [Sathya Gunasekaran](https://twitter.com/_gsathya)[Mofei Zhang](https://twitter.com/zmofei)
53+
- [深入解析 React 编译器](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=9313s),来自 [Sathya Gunasekaran](https://twitter.com/_gsathya)[Mofei Zhang](https://twitter.com/zmofei)
5454

5555
观看完整的第一天主题演讲:
5656

src/content/blog/2024/10/21/react-compiler-beta-release.md

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: "React Compiler 发布 Beta 版本"
2+
title: "React 编译器发布 Beta 版本"
33
author: Lauren Tan
44
date: 2024/10/21
5-
description: 在 React Conf 2024 上,我们宣布了 React Compiler 的实验性版本,这是一个构建时工具,可通过自动记忆化来优化 React 应用程序。在这篇文章中,我们想分享开源的下一步发展,以及我们在编译器方面的进展。
5+
description: 在 React Conf 2024 上,我们宣布了 React 编译器的实验性版本,这是一个构建时工具,可通过自动记忆化来优化 React 应用程序。在这篇文章中,我们想分享开源的下一步发展,以及我们在编译器方面的进展。
66

77
---
88

@@ -12,7 +12,7 @@ October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes).
1212

1313
<Note>
1414

15-
### React Compiler 现在处于 RC 版本!{/*react-compiler-is-now-in-rc*/}
15+
### React 编译器现在处于 RC 版本!{/*react-compiler-is-now-in-rc*/}
1616

1717
有关详细信息,请参阅 [RC 博客文章](/blog/2025/04/21/react-compiler-rc)
1818

@@ -24,23 +24,23 @@ React 团队很高兴分享新的内容:
2424

2525
</Intro>
2626

27-
1. 今天我们发布了 React Compiler Beta 版本,以便早期采用者和库维护者可以尝试它并提供反馈。
28-
2. 我们通过可选的 `react-compiler-runtime` 包来正式支持在 React 17+ 上的应用程序使用 React Compiler
29-
3. 我们正在开放 [React Compiler 工作组](https://github.com/reactwg/react-compiler) 的公共成员资格,为社区逐步采用该编译器做好准备。
27+
1. 今天我们发布了 React 编译器的 Beta 版本,以便早期采用者和库维护者可以尝试它并提供反馈。
28+
2. 我们通过可选的 `react-compiler-runtime` 包来正式支持在 React 17+ 上的应用程序使用 React 编译器
29+
3. 我们正在开放 [React 编译器工作组](https://github.com/reactwg/react-compiler) 的公共成员资格,为社区逐步采用该编译器做好准备。
3030

3131
---
3232

33-
[React Conf 2024](/blog/2024/05/22/react-conf-2024-recap) 上,我们宣布了 React Compiler 的实验版本,这是一个构建时工具,可通过自动记忆化来优化 React 应用程序。[你可以在这里找到对 React Compiler 的介绍](/learn/react-compiler)
33+
[React Conf 2024](/blog/2024/05/22/react-conf-2024-recap) 上,我们宣布了 React 编译器的实验版本,这是一个构建时工具,可通过自动记忆化来优化 React 应用程序。[你可以在这里找到对 React 编译器的介绍](/learn/react-compiler)
3434

3535
自第一个版本以来,我们修复了 React 社区报告的许多错误, 收到了多个高质量的错误修复和对编译器的贡献 [^1],使编译器能够更好地适应多种 JavaScript 模式,并继续在 Meta 上更广泛地推出编译器。
3636

37-
在这篇文章中,我们想分享 React Compiler 的下一步发展
37+
在这篇文章中,我们想分享 React 编译器的下一步发展
3838

39-
## 从今天起开始尝试 React Compiler Beta 版本吧 {/*try-react-compiler-beta-today*/}
39+
## 从今天起开始尝试 React 编译器的 Beta 版本吧 {/*try-react-compiler-beta-today*/}
4040

41-
[React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg) 上,我们分享了 React Compiler 的更新。今天,我们很高兴地宣布 React Compiler 和 ESLint 插件的新 Beta 版本。新的测试版使用 `@beta` 标签发布到 npm。
41+
[React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg) 上,我们分享了 React 编译器的更新。今天,我们很高兴地宣布 React 编译器和 ESLint 插件的新 Beta 版本。新的测试版使用 `@beta` 标签发布到 npm。
4242

43-
使用下面的方式来安装 React Compiler Beta 版本:
43+
使用下面的方式来安装 React 编译器的 Beta 版本:
4444

4545
<TerminalBlock>
4646
npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
@@ -56,9 +56,9 @@ yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
5656

5757
<YouTubeIframe src="https://www.youtube.com/embed/qd5yk2gxbtg" />
5858

59-
## 从今天起我们建议大家使用 React Compiler linter {/*we-recommend-everyone-use-the-react-compiler-linter-today*/}
59+
## 从今天起我们建议大家使用 React 编译器的 linter {/*we-recommend-everyone-use-the-react-compiler-linter-today*/}
6060

61-
React Compiler 的 ESLint 插件可帮助开发人员主动识别和纠正对于 [React 规则](/reference/rules) 的违规行为。**我们强烈建议大家从今天开始就使用 linter**。linter 不需要安装编译器,因此即使你还没有准备好尝试编译器,也可以独立使用它。
61+
React 编译器 的 ESLint 插件可帮助开发人员主动识别和纠正对于 [React 规则](/reference/rules) 的违规行为。**我们强烈建议大家从今天开始就使用 linter**。linter 不需要安装编译器,因此即使你还没有准备好尝试编译器,也可以独立使用它。
6262

6363
安装 linter 只需要执行:
6464

@@ -76,33 +76,33 @@ yarn add -D eslint-plugin-react-compiler@beta
7676

7777
## 向后兼容性 {/*backwards-compatibility*/}
7878

79-
React Compiler 生成的代码依赖于 React 19 中添加的运行时 API,但我们后来添加了对 React 17 和 18 的支持。如果你还没有使用 React 19,在 Beta 版本中可以通过在 compiler 配置中设置 `target` 来使用 React Compiler,并添加 `react-compiler-runtime` 作为依赖项。[你可以在这里找到相关文档](/reference/react-compiler/configuration#react-17-18)
79+
React 编译器 生成的代码依赖于 React 19 中添加的运行时 API,但我们后来添加了对 React 17 和 18 的支持。如果你还没有使用 React 19,在 Beta 版本中可以通过在 compiler 配置中设置 `target` 来使用 React 编译器,并添加 `react-compiler-runtime` 作为依赖项。[你可以在这里找到相关文档](/reference/react-compiler/configuration#react-17-18)
8080

81-
## 在库中使用 React Compiler {/*using-react-compiler-in-libraries*/}
81+
## 在库中使用 React 编译器 {/*using-react-compiler-in-libraries*/}
8282

8383
我们的初始版本侧重于识别在应用程序中使用编译器的主要问题。从那时起我们得到了很好的反馈,并对编译器进行了实质性改进。我们现在已准备好接受社区的广泛反馈,并让库作者尝试编译器以提高性能和维护体验。
8484

85-
React Compiler 还可以用来编译库。由于 React Compiler 需要在代码转换之前的源码上运行,因此应用程序无法使用 pipeline 来编译所使用的库。因此我们建议库维护人员使用编译器独立编译和测试他们的库,并将编译后的代码发布到 npm。
85+
React 编译器还可以用来编译库。由于 React 编译器需要在代码转换之前的源码上运行,因此应用程序无法使用 pipeline 来编译所使用的库。因此我们建议库维护人员使用编译器独立编译和测试他们的库,并将编译后的代码发布到 npm。
8686

8787
由于库的代码是预编译的,因此用户无需启用 Compiler 即可从编译器的自动记忆化中受益。如果库的 target 不是 React 19,请指定一个最小的 [`target` 并且将 `react-compiler-runtime` 添加为直接依赖](#using-react-compiler-with-react-17-or-18)。这个运行时包将根据应用程序的版本使用正确的 API 实现,并在必要时填充缺失的 API。
8888

8989
[你可以在此处找到更多相关文档。](/reference/react-compiler/compiling-libraries)
9090

91-
## 向所有人开放 React Compiler 工作组 {/*opening-up-react-compiler-working-group-to-everyone*/}
91+
## 向所有人开放 React 编译器工作组 {/*opening-up-react-compiler-working-group-to-everyone*/}
9292

93-
我们之前在 React Conf 上宣布成立邀请制的 [React Compiler 工作组](https://github.com/reactwg/react-compiler) 以提供反馈、提出问题并就编译器的实验版本进行协作。
93+
我们之前在 React Conf 上宣布成立邀请制的 [React 编译器工作组](https://github.com/reactwg/react-compiler) 以提供反馈、提出问题并就编译器的实验版本进行协作。
9494

95-
从今天开始,随着 React Compiler 的测试版发布,我们向所有人开放工作组成员资格。React Compiler 工作组的目标是为生态系统做好准备,以便现有应用程序和库顺利、逐步采用 React Compiler。请继续在 [React 仓库中](https://github.com/facebook/react) 提交错误报告,但是在 [工作组论坛](https://github.com/reactwg/react-compiler/discussions) 中留下反馈、提出问题或分享想法。
95+
从今天开始,随着 React 编译器的测试版发布,我们向所有人开放工作组成员资格。React 编译器工作组的目标是为生态系统做好准备,以便现有应用程序和库顺利、逐步采用 React 编译器。请继续在 [React 仓库中](https://github.com/facebook/react) 提交错误报告,但是在 [工作组论坛](https://github.com/reactwg/react-compiler/discussions) 中留下反馈、提出问题或分享想法。
9696

9797
核心团队还将使用工作组论坛来分享我们的研究成果。随着稳定版本的临近,任何重要信息也将发布在该论坛上。
9898

99-
## React Compiler 在 Meta {/*react-compiler-at-meta*/}
99+
## React 编译器在 Meta {/*react-compiler-at-meta*/}
100100

101-
[React Conf](/blog/2024/05/22/react-conf-2024-recap) 上,我们分享了在 Quest Store 和 Instagram 上成功推出编译器的消息。从那时起,我们在包括 [Facebook](https://www.facebook.com)[Threads](https://www.threads.net) 的几个主要 Web 应用程序中部署了 React Compiler。这意味着如果你最近使用过这些应用程序中的任何一个,你的体验可能是由编译器提供支持的。我们能够在包含超过 100,000 个 React 组件的 monorepo 中将这些应用程序加载到编译器上,只需进行少量代码更改。
101+
[React Conf](/blog/2024/05/22/react-conf-2024-recap) 上,我们分享了在 Quest Store 和 Instagram 上成功推出编译器的消息。从那时起,我们在包括 [Facebook](https://www.facebook.com)[Threads](https://www.threads.net) 的几个主要 Web 应用程序中部署了 React 编译器。这意味着如果你最近使用过这些应用程序中的任何一个,你的体验可能是由编译器提供支持的。我们能够在包含超过 100,000 个 React 组件的 monorepo 中将这些应用程序加载到编译器上,只需进行少量代码更改。
102102

103103
我们发现所有这些应用程序的性能都有显着提高。随着编译器的推出,我们将继续看到 [之前在 ReactConf 上分享的成功经验](https://youtu.be/lyEKhv8-3n0?t=3223) 的结果。多年来 Meta 工程师和 React 专家对这些应用程序经过了大量手工调整和优化,因此即使是几个百分点的改进对我们来说也是一个巨大的胜利。
104104

105-
我们还预计 React Compiler 会提高开发人员的生产力。为了衡量这一点,我们与 Meta[^2] 的数据科学合作伙伴合作,将手动记忆化对生产力的影响进行了彻底的统计分析。在 Meta 推出编译器之前,我们发现只有大约 8% 的 React PR 使用手动记忆化,并且这些 PR 的编写时间比其他 PR 增加了 31-46%[^3]。这证实了我们的直觉,即手动记忆化会带来认知开销,我们预计 React Compiler 将带来更高效的代码创作和审查。值得注意的是,React Compiler 还确保默认情况下记忆 **所有** 代码,而不仅仅是(在我们的例子中)开发人员明确记忆化的 8%。
105+
我们还预计 React 编译器会提高开发人员的生产力。为了衡量这一点,我们与 Meta[^2] 的数据科学合作伙伴合作,将手动记忆化对生产力的影响进行了彻底的统计分析。在 Meta 推出编译器之前,我们发现只有大约 8% 的 React PR 使用手动记忆化,并且这些 PR 的编写时间比其他 PR 增加了 31-46%[^3]。这证实了我们的直觉,即手动记忆化会带来认知开销,我们预计 React 编译器将带来更高效的代码创作和审查。值得注意的是,React 编译器还确保默认情况下记忆 **所有** 代码,而不仅仅是(在我们的例子中)开发人员明确记忆化的 8%。
106106

107107
## 稳定版本路线图 {/*roadmap-to-stable*/}
108108

@@ -112,7 +112,7 @@ React Compiler 还可以用来编译库。由于 React Compiler 需要在代码
112112

113113
* ✅ 实验性(Experimental):在 React Conf 2024 上发布,主要是为了获得早期采用者的反馈。
114114
* ✅ 公开测试版(Public Beta):现已推出,以获取更广泛社区的反馈。
115-
* 🚧 候选发布版(RC): React Compiler 适用于大多数遵循规则的应用程序和库,不会引入任何问题。
115+
* 🚧 候选发布版(RC): React 编译器适用于大多数遵循规则的应用程序和库,不会引入任何问题。
116116
* 🚧 普遍适用(General Availability):在社区的最终反馈期结束后。
117117

118118
这些版本还包括编译器的 ESLint 插件,该插件提供编译器静态分析的诊断信息。我们计划将现有的 eslint-plugin-react-hooks 插件与编译器的 ESLint 插件结合起来,因此最终只需要安装一个插件。

src/content/learn/typescript.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ function MyComponent() {
331331

332332
<Note>
333333

334-
[React Compiler](/learn/react-compiler) 会自动对值和函数进行记忆化处理,从而减少手动调用 `useMemo` 的需求。你可以使用编译器自动处理记忆化。
334+
[React 编译器](/learn/react-compiler) 会自动对值和函数进行记忆化处理,从而减少手动调用 `useMemo` 的需求。你可以使用编译器自动处理记忆化。
335335

336336
</Note>
337337

@@ -347,7 +347,7 @@ const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
347347

348348
<Note>
349349

350-
[React Compiler](/learn/react-compiler) 会自动对值和函数进行记忆化处理,从而减少手动调用 `useCallback` 的需求。你可以使用编译器自动处理记忆化。
350+
[React 编译器](/learn/react-compiler) 会自动对值和函数进行记忆化处理,从而减少手动调用 `useCallback` 的需求。你可以使用编译器自动处理记忆化。
351351

352352
</Note>
353353

src/content/learn/you-might-not-need-an-effect.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ function TodoList({ todos, filter }) {
9797

9898
<Note>
9999

100-
[React Compiler](/learn/react-compiler) 可以自动记忆化昂贵计算,从而减少很多手动调用 `useMemo` 的场景。
100+
[React 编译器](/learn/react-compiler) 可以自动记忆化昂贵计算,从而减少很多手动调用 `useMemo` 的场景。
101101

102102
</Note>
103103

src/content/reference/react-compiler/configuration.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ module.exports = {
2020
plugins: [
2121
[
2222
'babel-plugin-react-compiler', {
23-
// compiler options
23+
// 编译选项
2424
}
2525
]
2626
]
@@ -97,7 +97,7 @@ React 版本配置可确保编译器生成的代码与你的 React 版本兼容
9797

9898
条件式编译使你控制何时使用优化后的代码。
9999

100-
[`gating`](/reference/react-compiler/gating) 启用运行环境 feature flags,用于 A/B 测试或渐进式发布。
100+
[`gating`](/reference/react-compiler/gating) 启用运行时的特性开关,用于 A/B 测试或渐进式发布。
101101

102102
```js
103103
{
@@ -135,7 +135,7 @@ npm install react-compiler-runtime@rc
135135

136136
```js
137137
{
138-
target: '18' // or '17'
138+
target: '18' // '17'
139139
}
140140
```
141141

src/content/reference/react-compiler/target.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ title: target
1010

1111
```js
1212
{
13-
target: '19' // or '18', '17'
13+
target: '19' // '18', '17'
1414
}
1515
```
1616

@@ -57,7 +57,7 @@ title: target
5757

5858
```js
5959
{
60-
// defaults to target: '19'
60+
// 默认目标为: '19'
6161
}
6262
```
6363

@@ -95,7 +95,7 @@ npm install react-compiler-runtime@rc
9595
编译器会在这两个版本上使用 polyfill 运行环境:
9696

9797
```js
98-
// Compiled output uses the polyfill
98+
// 编译后的输出使用 polyfill
9999
import { c as _c } from 'react-compiler-runtime';
100100
```
101101

@@ -129,7 +129,7 @@ import { c as _c } from 'react-compiler-runtime';
129129
请确保运行环境包:
130130

131131
1. 安装在你的项目中(而非全局)
132-
2. 被列在 `package.json` 的 dependencies 中
132+
2. 被列在 `package.json` 的依赖中
133133
3. 使用正确版本(`@rc` 标签)
134134
4. 不在 `devDependencies` 中(运行环境需要)
135135

0 commit comments

Comments
 (0)