From 78a4c02fb4e832112cbf22aea5619d59cf06bee0 Mon Sep 17 00:00:00 2001 From: WuMingDao <146366930+WuMingDao@users.noreply.github.com> Date: Thu, 25 Sep 2025 00:24:31 +0000 Subject: [PATCH 1/3] Unified React Compiler translate and add some translate in /learn/react-compiler/ --- src/content/learn/react-compiler/debugging.md | 6 +++--- .../react-compiler/incremental-adoption.md | 18 ++++++++--------- .../learn/react-compiler/installation.md | 20 +++++++++---------- 3 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md index 51ff8120ba..7d1cd8f577 100644 --- a/src/content/learn/react-compiler/debugging.md +++ b/src/content/learn/react-compiler/debugging.md @@ -3,7 +3,7 @@ title: 调试和故障排除 --- -本指南可帮助您在使用 React Compiler 时识别和修复问题。学习如何调试编译问题并解决常见错误。 +本指南可帮助您在使用 React 编译器时识别和修复问题。学习如何调试编译问题并解决常见错误。 @@ -58,8 +58,8 @@ React Complier 可能导致你的应用出错的一个主要方式是，如果 ```js function ProblematicComponent() { - "use no memo"; // Skip compilation for this component - // ... rest of component + "use no memo"; // 跳过该组件的编译 + // ... 其余的组件 } ``` diff --git a/src/content/learn/react-compiler/incremental-adoption.md b/src/content/learn/react-compiler/incremental-adoption.md index 337c427390..971ddb5460 100644 --- a/src/content/learn/react-compiler/incremental-adoption.md +++ b/src/content/learn/react-compiler/incremental-adoption.md @@ -3,7 +3,7 @@ title: 逐步使用 --- -React Compiler 可以逐步采用，允许你首先在代码库的特定部分尝试使用。本指南将向你展示如何在现有项目中逐步推广该编译器的使用。 +React 编译器可以逐步采用，允许你首先在代码库的特定部分尝试使用。本指南将向你展示如何在现有项目中逐步推广该编译器的使用。 @@ -19,7 +19,7 @@ React Compiler 可以逐步采用，允许你首先在代码库的特定部分 ## 为何采用渐进式迁移？ {/*why-incremental-adoption*/} -React Compiler 的设计目的是自动优化你的整个代码库，但你不必一次性全部采用。渐进式采用让你能够控制推行过程，在扩展到其余部分之前，先在应用程序的小部分上测试编译器。 +React 编译器的设计目的是自动优化你的整个代码库，但你不必一次性全部采用。渐进式采用让你能够控制推行过程，在扩展到其余部分之前，先在应用程序的小部分上测试编译器。 从小处着手有助于建立对编译器优化的信心。你可以验证应用在编译代码下的行为是否正确，测量性能提升，并识别代码库中的任何特定边缘情况。这种方法对于稳定性至关重要的生产应用程序尤其有价值。 @@ -70,7 +70,7 @@ module.exports = { // babel.config.js module.exports = { plugins: [ - // Global plugins + // 全局插件 ], overrides: [ { @@ -82,7 +82,7 @@ module.exports = { { test: './src/legacy/**/*.{js,jsx,ts,tsx}', plugins: [ - // Different plugins for legacy code + // 针对旧代码的不同插件 ] } ] @@ -102,7 +102,7 @@ module.exports = { test: './src/experimental/**/*.{js,jsx,ts,tsx}', plugins: [ ['babel-plugin-react-compiler', { - // options ... + // 选项 ... }] ] }, @@ -110,7 +110,7 @@ module.exports = { test: './src/production/**/*.{js,jsx,ts,tsx}', plugins: [ ['babel-plugin-react-compiler', { - // options ... + // 选项 ... }] ] } @@ -146,7 +146,7 @@ module.exports = { ```js function TodoList({ todos }) { - "use memo"; // Opt this component into compilation + "use memo"; // 这个组件在编译里的选项 const sortedTodos = todos.slice().sort(); @@ -160,7 +160,7 @@ function TodoList({ todos }) { } function useSortedData(data) { - "use memo"; // Opt this hook into compilation + "use memo"; // 这个组件在编译里的选项 return data.slice().sort(); } @@ -204,7 +204,7 @@ module.exports = { ```js // ReactCompilerFeatureFlags.js export function isCompilerEnabled() { - // Use your feature flag system + // 使用你的特性开关系统 return getFeatureFlag('react-compiler-enabled'); } ``` diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 65fff4ea04..a9c93baf93 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -3,7 +3,7 @@ title: 安装 --- -本指南将帮助你在 React 应用程序中安装和配置 React Compiler。 +本指南将帮助你在 React 应用程序中安装和配置 React 编译器。 @@ -19,7 +19,7 @@ title: 安装 React 编译器专为与 React 19 配合使用而设计，但也支持 React 17 和 18。了解有关 [React 版本兼容性](/reference/react-compiler/target) 的更多信息。 -React Compiler 当前处于 RC 阶段。请使用 `@rc` 标签安装，以获取最新的发布候选版本。 +React 编译器当前处于 RC 阶段。请使用 `@rc` 标签安装，以获取最新的发布候选版本。 ## 安装 {/*installation*/} @@ -44,12 +44,12 @@ pnpm install -D babel-plugin-react-compiler@rc ## 基本设置 {/*basic-setup*/} -React Compiler 默认无需任何配置即可工作。不过，如果你需要在特殊情况下进行配置（例如，要支持低于 19 版本的 React），请参考[编译器选项参考文档](/reference/react-compiler/configuration)。 +React 编译器默认无需任何配置即可工作。不过，如果你需要在特殊情况下进行配置（例如，要支持低于 19 版本的 React），请参考[编译器选项参考文档](/reference/react-compiler/configuration)。 -设置过程取决于你使用的构建工具。React Compiler 包含一个 Babel 插件，可以集成到你的构建流程中。 +设置过程取决于你使用的构建工具。React 编译器包含一个 Babel 插件，可以集成到你的构建流程中。 -React Compiler 必须在你的 Babel 插件管道中 **首先** 运行。编译器需要原始的源代码信息来进行正确的分析，因此它必须在其他转换操作之前处理你的代码。 +React 编译器必须在你的 Babel 插件管道中 **首先** 运行。编译器需要原始的源代码信息来进行正确的分析，因此它必须在其他转换操作之前处理你的代码。 ### Babel {/*babel*/} @@ -59,10 +59,10 @@ React Compiler 必须在你的 Babel 插件管道中 **首先** 运行。编译 ```js {3} module.exports = { plugins: [ - 'babel-plugin-react-compiler', // must run first! - // ... other plugins + 'babel-plugin-react-compiler', // 必须首先运行！ + // ... 其他插件 ], - // ... other config + // ... 其他配置 }; ``` @@ -168,7 +168,7 @@ React Native 通过 Metro 使用 Babel，因此请参考 [与 Babel 配合使用 ## ESLint Integration {/*eslint-integration*/} -React Compiler 包含一条 ESLint 规则，可帮助识别无法优化的代码。当 ESLint 规则报告错误时，意味着编译器将跳过对该特定组件或 Hook 的优化。这是安全的：编译器将继续优化代码库的其他部分。你不需要立即修复所有违规之处。可以按照自己的节奏逐步解决这些问题，以逐渐增加已优化组件的数量。 +React 编译器包含一条 ESLint 规则，可帮助识别无法优化的代码。当 ESLint 规则报告错误时，意味着编译器将跳过对该特定组件或 Hook 的优化。这是安全的：编译器将继续优化代码库的其他部分。你不需要立即修复所有违规之处。可以按照自己的节奏逐步解决这些问题，以逐渐增加已优化组件的数量。 安装 ESLint 插件： @@ -230,7 +230,7 @@ export default function MyApp() { ```js function ProblematicComponent() { "use no memo"; - // Component code here + // 这里是组件代码 } ``` From 50cd431f18e37e1fb557b6fb5371716320fac6b6 Mon Sep 17 00:00:00 2001 From: WuMingDao <146366930+WuMingDao@users.noreply.github.com> Date: Thu, 25 Sep 2025 00:58:17 +0000 Subject: [PATCH 2/3] Unified React Compiler translate and add some translate --- .../blog/2024/05/22/react-conf-2024-recap.md | 6 +-- .../2024/10/21/react-compiler-beta-release.md | 46 +++++++++---------- src/content/learn/typescript.md | 4 +- .../learn/you-might-not-need-an-effect.md | 2 +- .../reference/react-compiler/configuration.md | 6 +-- .../reference/react-compiler/target.md | 8 ++-- src/content/reference/react/index.md | 14 +++--- src/content/reference/react/memo.md | 16 +++---- src/content/reference/react/useCallback.md | 2 +- src/content/reference/react/useMemo.md | 2 +- 10 files changed, 53 insertions(+), 53 deletions(-) diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md index f7e274e1af..0411b0243d 100644 --- a/src/content/blog/2024/05/22/react-conf-2024-recap.md +++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md @@ -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) 的直播已经可以在线观看了。在这篇文章中，我们将总结活动中的演讲和公告。 @@ -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) 观看完整的第一天主题演讲： diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md index 6ef13a3399..66940bce59 100644 --- a/src/content/blog/2024/10/21/react-compiler-beta-release.md +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -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 应用程序。在这篇文章中，我们想分享开源的下一步发展，以及我们在编译器方面的进展。 --- @@ -12,7 +12,7 @@ October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes). -### 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)。 @@ -24,23 +24,23 @@ React 团队很高兴分享新的内容： -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 版本： 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 -## 从今天起我们建议大家使用 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 只需要执行： @@ -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*/} @@ -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 插件结合起来，因此最终只需要安装一个插件。 diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index f203fc1815..0563871f37 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -331,7 +331,7 @@ function MyComponent() { -[React Compiler](/learn/react-compiler) 会自动对值和函数进行记忆化处理，从而减少手动调用 `useMemo` 的需求。你可以使用编译器自动处理记忆化。 +[React 编译器](/learn/react-compiler) 会自动对值和函数进行记忆化处理，从而减少手动调用 `useMemo` 的需求。你可以使用编译器自动处理记忆化。 @@ -347,7 +347,7 @@ const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); -[React Compiler](/learn/react-compiler) 会自动对值和函数进行记忆化处理，从而减少手动调用 `useCallback` 的需求。你可以使用编译器自动处理记忆化。 +[React 编译器](/learn/react-compiler) 会自动对值和函数进行记忆化处理，从而减少手动调用 `useCallback` 的需求。你可以使用编译器自动处理记忆化。 diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index dc86831451..90b4c8d603 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -97,7 +97,7 @@ function TodoList({ todos, filter }) { -[React Compiler](/learn/react-compiler) 可以自动记忆化昂贵计算，从而减少很多手动调用 `useMemo` 的场景。 +[React 编译器](/learn/react-compiler) 可以自动记忆化昂贵计算，从而减少很多手动调用 `useMemo` 的场景。 diff --git a/src/content/reference/react-compiler/configuration.md b/src/content/reference/react-compiler/configuration.md index c240d8f4cc..f8ba7e2817 100644 --- a/src/content/reference/react-compiler/configuration.md +++ b/src/content/reference/react-compiler/configuration.md @@ -20,7 +20,7 @@ module.exports = { plugins: [ [ 'babel-plugin-react-compiler', { - // compiler options + // 编译选项 } ] ] @@ -97,7 +97,7 @@ React 版本配置可确保编译器生成的代码与你的 React 版本兼容 条件式编译使你控制何时使用优化后的代码。 -[`gating`](/reference/react-compiler/gating) 启用运行环境 feature flags，用于 A/B 测试或渐进式发布。 +[`gating`](/reference/react-compiler/gating) 启用运行时的特性开关，用于 A/B 测试或渐进式发布。 ```js { @@ -135,7 +135,7 @@ npm install react-compiler-runtime@rc ```js { - target: '18' // or '17' + target: '18' // 或 '17' } ``` diff --git a/src/content/reference/react-compiler/target.md b/src/content/reference/react-compiler/target.md index ef9523f6fd..beffaa8185 100644 --- a/src/content/reference/react-compiler/target.md +++ b/src/content/reference/react-compiler/target.md @@ -10,7 +10,7 @@ title: target ```js { - target: '19' // or '18', '17' + target: '19' // 或 '18', '17' } ``` @@ -57,7 +57,7 @@ title: target ```js { - // defaults to target: '19' + // 默认目标为: '19' } ``` @@ -95,7 +95,7 @@ npm install react-compiler-runtime@rc 编译器会在这两个版本上使用 polyfill 运行环境： ```js -// Compiled output uses the polyfill +// 编译后的输出使用 polyfill import { c as _c } from 'react-compiler-runtime'; ``` @@ -129,7 +129,7 @@ import { c as _c } from 'react-compiler-runtime'; 请确保运行环境包： 1. 安装在你的项目中（而非全局） -2. 被列在 `package.json` 的 dependencies 中 +2. 被列在 `package.json` 的依赖中 3. 使用正确版本（`@rc` 标签） 4. 不在 `devDependencies` 中（运行环境需要） diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 82a043a0a8..08b5dd94d9 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -30,21 +30,21 @@ React-dom 仅支持在 web 应用程序中使用（在浏览器 DOM 环境中运 * [服务端 API](/reference/react-dom/server) —— `react-dom/server` API 允许在服务器端将 React 组件渲染为 HTML。 -## React Compiler {/*react-compiler*/} +## React 编译器 {/*react-compiler*/} -React Compiler 是一个构建时优化工具，可以自动为你的 React 组件和数值添加记忆优化（memoization）： +React 编译器是一个构建时优化工具，可以自动为你的 React 组件和数值添加记忆优化（memoization）： -* [配置](/reference/react-compiler/configuration) —— React Compiler 的配置选项。 +* [配置](/reference/react-compiler/configuration) —— React 编译器的配置选项。 * [指令](/reference/react-compiler/directives) —— 用于控制编译的函数级指令。 * [编译库](/reference/react-compiler/compiling-libraries) —— 发布预编译库代码的指南。 -## ESLint Plugin React Hooks {/*eslint-plugin-react-hooks*/} +## React Hook 的 ESLint 插件 {/*eslint-plugin-react-hooks*/} -The [ESLint plugin for React Hooks](/reference/eslint-plugin-react-hooks) helps enforce the Rules of React: +[ 针对 React Hook 的 ESLint 插件](/reference/eslint-plugin-react-hooks) 帮助强制执行 React 的规则： -* [Lints](/reference/eslint-plugin-react-hooks) - Detailed documentation for each lint with examples. +* [Lints](/reference/eslint-plugin-react-hooks) —— 每种 lint 的详细文档和示例。 -## Rules of React {/*rules-of-react*/} +## React 的规则 {/*rules-of-react*/} React 有一套表达模式的俗语与规则，它们以一种易于理解并能帮助实现高质量应用程序的方式表达出来： diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 8bcd1d0b29..ec4a837995 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -14,7 +14,7 @@ const MemoizedComponent = memo(SomeComponent, arePropsEqual?) -[React Compiler](/learn/react-compiler) 会自动为所有组件应用与 `memo` 等价的优化，从而减少手动记忆化的需要。你可以使用编译器自动处理组件记忆化。 +[React 编译器](/learn/react-compiler) 会自动为所有组件应用与 `memo` 等价的优化，从而减少手动记忆化的需要。你可以使用编译器自动处理组件记忆化。 @@ -363,13 +363,13 @@ function arePropsEqual(oldProps, newProps) { --- -### 使用 React Compiler 时我还需要 React.memo 吗？ {/*react-compiler-memo*/} +### 使用 React 编译器时我还需要 React.memo 吗？ {/*react-compiler-memo*/} -当你启用 [React Compiler](/learn/react-compiler) 后，通常不再需要 `React.memo` 了。编译器会为你自动优化组件的重新渲染。 +当你启用 [React 编译器](/learn/react-compiler) 后，通常不再需要 `React.memo` 了。编译器会为你自动优化组件的重新渲染。 其工作方式如下： -在 **未启用 React Compiler** 时，你需要 `React.memo` 来避免不必要的重新渲染： +在 **未启用 React 编译器** 时，你需要 `React.memo` 来避免不必要的重新渲染： ```js // 父级每秒重新渲染一次 @@ -398,7 +398,7 @@ const ExpensiveChild = memo(function ExpensiveChild({ name }) { }); ``` -**启用 React Compiler** 后，相同的优化会自动发生： +**启用 React 编译器** 后，相同的优化会自动发生： ```js // 无需 memo - 编译器会自动阻止重新渲染 @@ -408,7 +408,7 @@ function ExpensiveChild({ name }) { } ``` -下面是 React Compiler 生成代码的关键部分： +下面是 React 编译器生成代码的关键部分： ```js {6-12} function Parent() { @@ -429,12 +429,12 @@ function Parent() { 注意这些高亮行: 编译器会包裹 `` 在缓存里检查。由于 `name` prop 始终是 `"John"`, 这段 JSX 只创建一次，并在每次父组件重新渲染时重用。这正是 `React.memo` 的作用 - 当子组件的 props 没有变化时，防止其重新渲染。 -React Compiler 会自动： +React 编译器会自动： 1. 追踪传给 `ExpensiveChild` 的 `name` 有无变化 2. 为 `` 重用先前创建的 JSX 3. 完全跳过 `ExpensiveChild` 的重新渲染 -这意味着 **在使用 React Compiler 时，你可以放心移除 `React.memo`**. 编译器会自动提供相同的优化，让代码更简洁更易维护。 +这意味着 **在使用 React 编译器时，你可以放心移除 `React.memo`**. 编译器会自动提供相同的优化，让代码更简洁更易维护。 diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md index 2d936da832..8c9d1aac51 100644 --- a/src/content/reference/react/useCallback.md +++ b/src/content/reference/react/useCallback.md @@ -14,7 +14,7 @@ const cachedFn = useCallback(fn, dependencies) -[React Compiler](/learn/react-compiler) 会自动对值和函数进行记忆化处理，从而减少手动调用 `useCallback` 的需求。你可以使用编译器自动处理记忆化。 +[React 编译器](/learn/react-compiler) 会自动对值和函数进行记忆化处理，从而减少手动调用 `useCallback` 的需求。你可以使用编译器自动处理记忆化。 diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index cb6dc94dee..9c1b3cc79b 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -14,7 +14,7 @@ const cachedValue = useMemo(calculateValue, dependencies) -[React Compiler](/learn/react-compiler) 会自动对值和函数进行记忆化处理，从而减少手动调用 `useMemo` 的需求。你可以使用编译器自动处理记忆化。 +[React 编译器](/learn/react-compiler) 会自动对值和函数进行记忆化处理，从而减少手动调用 `useMemo` 的需求。你可以使用编译器自动处理记忆化。 From f41a02699dcecfc927a1fb4bc2323da1e8fabf37 Mon Sep 17 00:00:00 2001 From: WuMingDao <146366930+WuMingDao@users.noreply.github.com> Date: Thu, 25 Sep 2025 01:06:24 +0000 Subject: [PATCH 3/3] add translate --- src/content/learn/react-compiler/installation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index a9c93baf93..0d146cbb73 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -135,7 +135,7 @@ export default defineConfig({ babel({ filter: /\.[jt]sx?$/, babelConfig: { - presets: ["@babel/preset-typescript"], // if you use TypeScript + presets: ["@babel/preset-typescript"], // 如果你使用 TypeScript plugins: [ ["babel-plugin-react-compiler", ReactCompilerConfig], ],