Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/content/blog/2024/05/22/react-conf-2024-recap.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ description: 上周我们在内华达州亨德森举办了为期两天的 React

---

在 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 服务器组件等等。
在 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 服务器组件等等。

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

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

最后,[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 供大家尝试
最后,[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 编译器供大家尝试

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

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

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

Expand Down
46 changes: 23 additions & 23 deletions src/content/blog/2024/10/21/react-compiler-beta-release.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: "React Compiler 发布 Beta 版本"
title: "React 编译器发布 Beta 版本"
author: Lauren Tan
date: 2024/10/21
description: 在 React Conf 2024 上,我们宣布了 React Compiler 的实验性版本,这是一个构建时工具,可通过自动记忆化来优化 React 应用程序。在这篇文章中,我们想分享开源的下一步发展,以及我们在编译器方面的进展。
description: 在 React Conf 2024 上,我们宣布了 React 编译器的实验性版本,这是一个构建时工具,可通过自动记忆化来优化 React 应用程序。在这篇文章中,我们想分享开源的下一步发展,以及我们在编译器方面的进展。

---

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

<Note>

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

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

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

</Intro>

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

---

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

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

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

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

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

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

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

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

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

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

安装 linter 只需要执行:

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

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

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

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

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

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

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

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

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

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

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

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

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

在 [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 中将这些应用程序加载到编译器上,只需进行少量代码更改。
在 [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 中将这些应用程序加载到编译器上,只需进行少量代码更改。

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

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

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

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

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

这些版本还包括编译器的 ESLint 插件,该插件提供编译器静态分析的诊断信息。我们计划将现有的 eslint-plugin-react-hooks 插件与编译器的 ESLint 插件结合起来,因此最终只需要安装一个插件。
Expand Down
6 changes: 3 additions & 3 deletions src/content/learn/react-compiler/debugging.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: 调试和故障排除
---

<Intro>
本指南可帮助您在使用 React Compiler 时识别和修复问题。学习如何调试编译问题并解决常见错误。
本指南可帮助您在使用 React 编译器时识别和修复问题。学习如何调试编译问题并解决常见错误。
</Intro>

<YouWillLearn>
Expand Down Expand Up @@ -58,8 +58,8 @@ React Complier 可能导致你的应用出错的一个主要方式是,如果

```js
function ProblematicComponent() {
"use no memo"; // Skip compilation for this component
// ... rest of component
"use no memo"; // 跳过该组件的编译
// ... 其余的组件
}
```

Expand Down
18 changes: 9 additions & 9 deletions src/content/learn/react-compiler/incremental-adoption.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: 逐步使用
---

<Intro>
React Compiler 可以逐步采用,允许你首先在代码库的特定部分尝试使用。本指南将向你展示如何在现有项目中逐步推广该编译器的使用。
React 编译器可以逐步采用,允许你首先在代码库的特定部分尝试使用。本指南将向你展示如何在现有项目中逐步推广该编译器的使用。
</Intro>

<YouWillLearn>
Expand All @@ -19,7 +19,7 @@ React Compiler 可以逐步采用,允许你首先在代码库的特定部分

## 为何采用渐进式迁移? {/*why-incremental-adoption*/}

React Compiler 的设计目的是自动优化你的整个代码库,但你不必一次性全部采用。渐进式采用让你能够控制推行过程,在扩展到其余部分之前,先在应用程序的小部分上测试编译器。
React 编译器的设计目的是自动优化你的整个代码库,但你不必一次性全部采用。渐进式采用让你能够控制推行过程,在扩展到其余部分之前,先在应用程序的小部分上测试编译器。

从小处着手有助于建立对编译器优化的信心。你可以验证应用在编译代码下的行为是否正确,测量性能提升,并识别代码库中的任何特定边缘情况。这种方法对于稳定性至关重要的生产应用程序尤其有价值。

Expand Down Expand Up @@ -70,7 +70,7 @@ module.exports = {
// babel.config.js
module.exports = {
plugins: [
// Global plugins
// 全局插件
],
overrides: [
{
Expand All @@ -82,7 +82,7 @@ module.exports = {
{
test: './src/legacy/**/*.{js,jsx,ts,tsx}',
plugins: [
// Different plugins for legacy code
// 针对旧代码的不同插件
]
}
]
Expand All @@ -102,15 +102,15 @@ module.exports = {
test: './src/experimental/**/*.{js,jsx,ts,tsx}',
plugins: [
['babel-plugin-react-compiler', {
// options ...
// 选项 ...
}]
]
},
{
test: './src/production/**/*.{js,jsx,ts,tsx}',
plugins: [
['babel-plugin-react-compiler', {
// options ...
// 选项 ...
}]
]
}
Expand Down Expand Up @@ -146,7 +146,7 @@ module.exports = {

```js
function TodoList({ todos }) {
"use memo"; // Opt this component into compilation
"use memo"; // 这个组件在编译里的选项

const sortedTodos = todos.slice().sort();

Expand All @@ -160,7 +160,7 @@ function TodoList({ todos }) {
}

function useSortedData(data) {
"use memo"; // Opt this hook into compilation
"use memo"; // 这个组件在编译里的选项

return data.slice().sort();
}
Expand Down Expand Up @@ -204,7 +204,7 @@ module.exports = {
```js
// ReactCompilerFeatureFlags.js
export function isCompilerEnabled() {
// Use your feature flag system
// 使用你的特性开关系统
return getFeatureFlag('react-compiler-enabled');
}
```
Expand Down
Loading
Loading