Skip to content

Commit 4d16e06

Browse files
authored
docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ 740016e (#1704)
2 parents 5f3cc46 + 66a166a commit 4d16e06

File tree

9 files changed

+174
-51
lines changed

9 files changed

+174
-51
lines changed

next-env.d.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/// <reference types="next" />
22
/// <reference types="next/image-types/global" />
3-
/// <reference types="next/navigation-types/compat/navigation" />
43

54
// NOTE: This file should not be edited
6-
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
5+
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

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

+8
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@ October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes).
1010

1111
---
1212

13+
<Note>
14+
15+
### React Compiler 现在处于 RC 版本!{/*react-compiler-is-now-in-rc*/}
16+
17+
有关详细信息,请参阅 [RC 博客文章](/blog/2025/04/21/react-compiler-rc)
18+
19+
</Note>
20+
1321
<Intro>
1422

1523
React 团队很高兴分享新的内容:
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
---
2+
title: "React Compiler RC"
3+
author: Lauren Tan and Mofei Zhang
4+
date: 2025/04/21
5+
description: We are releasing the compiler's first Release Candidate (RC) today.
6+
7+
---
8+
9+
April 21, 2025 by [Lauren Tan](https://x.com/potetotes) and [Mofei Zhang](https://x.com/zmofei).
10+
11+
---
12+
13+
<Intro>
14+
15+
The React team is excited to share new updates:
16+
17+
</Intro>
18+
19+
1. We're publishing React Compiler RC today, in preparation of the compiler's stable release.
20+
2. We're merging `eslint-plugin-react-compiler` into `eslint-plugin-react-hooks`.
21+
3. We've added support for swc and are working with oxc to support Babel-free builds.
22+
23+
---
24+
25+
[React Compiler](https://react.dev/learn/react-compiler) is a build-time tool that optimizes your React app through automatic memoization. Last year, we published React Compiler’s [first beta](https://react.dev/blog/2024/10/21/react-compiler-beta-release) and received lots of great feedback and contributions. We’re excited about the wins we’ve seen from folks adopting the compiler (see case studies from [Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) and [Wakelet](https://github.com/reactwg/react-compiler/discussions/52)) and are working towards a stable release.
26+
27+
We are releasing the compiler's first Release Candidate (RC) today. The RC is intended to be a stable and near-final version of the compiler, and safe to try out in production.
28+
29+
## Use React Compiler RC today {/*use-react-compiler-rc-today*/}
30+
To install the RC:
31+
32+
npm
33+
<TerminalBlock>
34+
{`npm install --save-dev --save-exact babel-plugin-react-compiler@rc`}
35+
</TerminalBlock>
36+
37+
pnpm
38+
<TerminalBlock>
39+
{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@rc`}
40+
</TerminalBlock>
41+
42+
yarn
43+
<TerminalBlock>
44+
{`yarn add --dev --exact babel-plugin-react-compiler@rc`}
45+
</TerminalBlock>
46+
47+
As part of the RC, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Complier now supports optional chains and array indices as dependencies. We're exploring how to infer even more dependencies like equality checks and string interpolation. These improvements ultimately result in fewer re-renders and more responsive UIs.
48+
49+
We have also heard from the community that the ref-in-render validation sometimes has false positives. Since as a general philosophy we want you to be able to fully trust in the compiler's error messages and hints, we are turning it off by default for now. We will keep working to improve this validation, and we will re-enable it in a follow up release.
50+
51+
You can find more details on using the Compiler in [our docs](https://react.dev/learn/react-compiler).
52+
53+
## Feedback {/*feedback*/}
54+
During the RC period, we encourage all React users to try the compiler and provide feedback in the React repo. Please [open an issue](https://github.com/facebook/react/issues) if you encounter any bugs or unexpected behavior. If you have a general question or suggestion, please post them in the [React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions).
55+
56+
## Backwards Compatibility {/*backwards-compatibility*/}
57+
As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18).
58+
59+
## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/}
60+
If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@^6.0.0-rc.1`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement!
61+
62+
To install:
63+
64+
npm
65+
<TerminalBlock>
66+
{`npm install --save-dev eslint-plugin-react-hooks@^6.0.0-rc.1`}
67+
</TerminalBlock>
68+
69+
pnpm
70+
<TerminalBlock>
71+
{`pnpm add --save-dev eslint-plugin-react-hooks@^6.0.0-rc.1`}
72+
</TerminalBlock>
73+
74+
yarn
75+
<TerminalBlock>
76+
{`yarn add --dev eslint-plugin-react-hooks@^6.0.0-rc.1`}
77+
</TerminalBlock>
78+
79+
```js
80+
// eslint.config.js
81+
import * as reactHooks from 'eslint-plugin-react-hooks';
82+
83+
export default [
84+
// Flat Config (eslint 9+)
85+
reactHooks.configs.recommended,
86+
87+
// Legacy Config
88+
reactHooks.configs['recommended-latest']
89+
];
90+
```
91+
92+
The linter does not require the compiler to be installed, so there's no risk in upgrading eslint-plugin-react-hooks. We recommend everyone upgrade today.
93+
94+
## swc support (experimental) {/*swc-support-experimental*/}
95+
React Compiler can be installed across [several build tools](/learn/react-compiler#installation) such as Babel, Vite, and Rsbuild.
96+
97+
In addition to those tools, we have been collaborating with Kang Dongyoong ([@kdy1dev](https://x.com/kdy1dev)) from the [swc](https://swc.rs/) team on adding additional support for React Compiler as an swc plugin. As part of the RC release, you can now integrate the compiler into your [Next.js app with swc](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler) instead of Babel.
98+
99+
Next.js users can upgrade to [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) or greater to try this out. If you have already enabled the compiler in your Next.js's config, swc support will be enabled automatically.
100+
101+
Vite users can continue to use [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) to enable the compiler, by adding it as a [Babel plugin](https://react.dev/learn/react-compiler#usage-with-vite). We are also working with the [oxc](https://oxc.rs/) team to [add support for the compiler](https://github.com/oxc-project/oxc/issues/10048). Once [rolldown](https://github.com/rolldown/rolldown) is officially released and supported in Vite and oxc support is added for React Compiler, we'll update the docs with information on how to migrate.
102+
103+
## Upgrading React Compiler {/*upgrading-react-compiler*/}
104+
React Compiler works best when the auto-memoization applied is strictly for performance. Future versions of the compiler may change how memoization is applied, for example it could become more granular and precise.
105+
106+
However, because product code may sometimes break the [rules of React](https://react.dev/reference/rules) in ways that aren't always statically detectable in JavaScript, changing memoization can occasionally have unexpected results. For example, a previously memoized value might be used as a dependency for a useEffect somewhere in the component tree. Changing how or whether this value is memoized can cause over or under-firing of that useEffect. While we encourage [useEffect only for synchronization](https://react.dev/learn/synchronizing-with-effects), your codebase may have useEffects that cover other use-cases such as effects that needs to only run in response to specific values changing.
107+
108+
In other words, changing memoization may under rare circumstances cause unexpected behavior. For this reason, we recommend following the Rules of React and employing continuous end-to-end testing of your app so you can upgrade the compiler with confidence and identify any rules of React violations that might cause issues.
109+
110+
If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `19.1.0`) rather than a SemVer range (eg `^19.1.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected.
111+
112+
## Roadmap to Stable {/*roadmap-to-stable*/}
113+
*This is not a final roadmap, and is subject to change.*
114+
115+
After a period of final feedback from the community on the RC, we plan on a Stable Release for the compiler.
116+
117+
* ✅ Experimental: Released at React Conf 2024, primarily for feedback from application developers.
118+
* ✅ Public Beta: Available today, for feedback from library authors.
119+
* ✅ Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue.
120+
* General Availability: After final feedback period from the community.
121+
122+
Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns.
123+
124+
---
125+
126+
Thanks to [Joe Savona](https://x.com/en_JS), [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), and [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev) for reviewing and editing this post.

src/content/blog/index.md

+7-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@ title: React Blog
1111

1212
<div className="sm:-mx-5 flex flex-col gap-5 mt-12">
1313

14-
<BlogCard title="逐步淘汰 Create React App" date="February 13, 2025" url="/blog/2025/02/14/sunsetting-create-react-app">
14+
<BlogCard title="React Compiler RC" date="April 21, 2025" url="/blog/2025/04/21/react-compiler-rc">
15+
16+
我们今天将发布 React Compiler 的第一个候选发布版(RC)。
17+
18+
</BlogCard>
19+
20+
<BlogCard title="逐步淘汰 Create React App" date="February 14, 2025" url="/blog/2025/02/14/sunsetting-create-react-app">
1521

1622
今日起,我们将正式弃用 Create React App 作为新应用的推荐工具,并建议现有应用迁移至框架或构建工具(如 Vite、Parcel 和 RSBuild)。我们还提供了相关文档用于这些情况:你的项目不适合使用框架、你想要构建自己的框架,或者只是想通过从零开始构建一个 React 应用来了解 React 的工作原理等等……
1723

src/content/learn/react-compiler.md

+12-44
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@ title: React Compiler
66
本页面将为你介绍新的 React Compiler,以及如何成功试用。
77
</Intro>
88

9-
<Wip>
10-
这些文档仍在不断完善中。更多文档可在 [React Compiler 工作组代码库](https://github.com/reactwg/react-compiler/discussions) 中找到,并在这些文档更加稳定时被整合进来。
11-
</Wip>
12-
139
<YouWillLearn>
1410

1511
* 开始使用 React Compiler
@@ -19,9 +15,9 @@ title: React Compiler
1915
</YouWillLearn>
2016

2117
<Note>
22-
React Compiler 是一个处于 Beta 阶段的新的编译器,我们将其开源以获取社区的早期反馈。虽然Meta 等公司已经在生产中使用它,但是能否在你的应用程序中使用它取决于代码库的健康状态以及你遵守 [React 规则](/reference/rules) 的程度
18+
React Compiler 是一个处于 RC 阶段的新的编译器,我们将其开源以获取社区反馈。现在我们建议所有人都使用编译器
2319

24-
最新的 Beta 版本发布于 `@beta` 标签,每日实验版本发布于 `@experimental` 标签。
20+
最新的 RC 版本发布于 `@rc` 标签,每日实验版本发布于 `@experimental` 标签。
2521
</Note>
2622

2723
React Compiler 是一个新编译器,我们将其开源以获取社区的早期反馈。它是一个仅在构建时使用的工具,可以自动优化你的 React 应用程序。它可以与纯 JavaScript 一起使用,并且了解 [React 规则](/reference/rules),因此你无需重写任何代码即可使用它。
@@ -32,13 +28,13 @@ React Compiler 是一个新编译器,我们将其开源以获取社区的早
3228
编译器目前处于 `beta` 阶段,并且可以在 React 17+ 应用程序和库上使用。安装方式如下:
3329

3430
<TerminalBlock>
35-
npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
31+
{`npm install -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`}
3632
</TerminalBlock>
3733

3834
或者使用 Yarn:
3935

4036
<TerminalBlock>
41-
yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
37+
{`yarn add -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`}
4238
</TerminalBlock>
4339

4440
如果你还没有使用 React 19,请参考 [此内容](#using-react-compiler-with-react-17-or-18) 以获得进一步说明。
@@ -117,51 +113,23 @@ function TableContainer({ items }) {
117113

118114
### 我应该尝试一下编译器吗? {/*should-i-try-out-the-compiler*/}
119115

120-
请注意,编译器仍处于 Beta 阶段,存在许多不完善之处。虽然它已经在 Meta 等公司的生产环境中使用过,但将编译器应用于你的应用程序生产环境将取决于你的代码库的健康状况以及你是否遵循了 [React 的规则](/reference/rules)
116+
请注意,编译器处于 RC 阶段,并已在生产中进行了广泛测试。虽然它已经在 Meta 等公司的生产环境中使用过,但将编译器应用于你的应用程序生产环境将取决于你的代码库的健康状况以及你是否遵循了 [React 的规则](/reference/rules)
121117

122118
**你现在不必急着使用编译器。在采用它之前等到它达到稳定版本是可以的。** 然而,我们确实赞赏在你的应用程序中进行小型实验,以便你可以向我们 [提供反馈](#reporting-issues),帮助使编译器更好。
123119

124120
## 开始 {/*getting-started*/}
125121

126122
除了这些文档之外,我们还建议查看 [React Compiler 工作组](https://github.com/reactwg/react-compiler),以获取有关编译器的更多信息和讨论。
127123

128-
### 安装 eslint-plugin-react-compiler {/*installing-eslint-plugin-react-compiler*/}
124+
### 安装 eslint-plugin-react-hooks {/*installing-eslint-plugin-react-compiler*/}
129125

130-
React Compiler 还为 ESLint 插件提供支持。ESLint 插件可以**独立**于编译器使用,这意味着即使你不使用编译器,也可以使用 ESLint 插件
126+
React Compiler 还支持作为 ESLint 插件。你可以通过安装 eslint-plugin-react-hooks@^6.0.0-rc.1 来使用它
131127

132128
<TerminalBlock>
133-
npm install -D eslint-plugin-react-compiler@beta
129+
{`npm install -D eslint-plugin-react-hooks@^6.0.0-rc.1`}
134130
</TerminalBlock>
135131

136-
然后,将其添加到你的 ESLint 配置中:
137-
138-
```js
139-
import reactCompiler from 'eslint-plugin-react-compiler'
140-
141-
export default [
142-
{
143-
plugins: {
144-
'react-compiler': reactCompiler,
145-
},
146-
rules: {
147-
'react-compiler/react-compiler': 'error',
148-
},
149-
},
150-
]
151-
```
152-
153-
或者使用已弃用的 eslintrc 配置格式:
154-
155-
```js
156-
module.exports = {
157-
plugins: [
158-
'eslint-plugin-react-compiler',
159-
],
160-
rules: {
161-
'react-compiler/react-compiler': 'error',
162-
},
163-
}
164-
```
132+
查看 [编辑器设置](/learn/editor-setup#linting) 指南来了解更多信息。
165133

166134
ESLint 插件将在编辑器中显示任何违反 React 规则的行为。当它这样做时,这意味着编译器跳过了优化该组件或钩子。这是完全可以的,编译器可以恢复并继续优化代码库中的其他组件。
167135

@@ -195,7 +163,7 @@ const ReactCompilerConfig = {
195163
React Compiler 与 React 19 RC 配合使用效果最佳。如果你无法升级,可以安装额外的 `react-compiler-runtime` 包来编译代码并在 19 之前的版本上运行。 但请注意,支持的最低版本是 17。
196164

197165
<TerminalBlock>
198-
npm install react-compiler-runtime@beta
166+
{`npm install react-compiler-runtime@rc`}
199167
</TerminalBlock>
200168

201169
你还应该在编译器配置中添加正确的 `target`,值为你所使用的 React 大版本。
@@ -230,7 +198,7 @@ React Compiler 还可用于编译库。由于 React Compiler 需要在代码转
230198
### Babel {/*usage-with-babel*/}
231199

232200
<TerminalBlock>
233-
npm install babel-plugin-react-compiler@beta
201+
{`npm install babel-plugin-react-compiler@rc`}
234202
</TerminalBlock>
235203

236204
编译器包含一个 Babel 插件,你可以在构建流水线中使用它来运行编译器。
@@ -285,7 +253,7 @@ export default defineConfig(() => {
285253
安装 `vite-plugin-babel`, 并将编译器的 Babel 插件添加到其中:
286254

287255
<TerminalBlock>
288-
npm install vite-plugin-babel
256+
{`npm install vite-plugin-babel`}
289257
</TerminalBlock>
290258

291259
```js {2,14}

src/content/reference/react-dom/client/hydrateRoot.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -380,12 +380,13 @@ It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually
380380
381381
By default, React will log all errors to the console. To implement your own error reporting, you can provide the optional error handler root options `onUncaughtError`, `onCaughtError` and `onRecoverableError`:
382382
383-
```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack", 15]]
383+
```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack", 15]]
384384
import { hydrateRoot } from "react-dom/client";
385+
import App from "./App.js";
385386
import { reportCaughtError } from "./reportError";
386387

387388
const container = document.getElementById("root");
388-
const root = hydrateRoot(container, {
389+
const root = hydrateRoot(container, <App />, {
389390
onCaughtError: (error, errorInfo) => {
390391
if (error.message !== "Known error") {
391392
reportCaughtError({

src/content/reference/rsc/server-functions.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ function EmptyNote () {
5454
}
5555
```
5656

57-
When React renders the `EmptyNote` Server Function, it will create a reference to the `createNoteAction` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNoteAction` function with the reference provided:
57+
When React renders the `EmptyNote` Server Component, it will create a reference to the `createNoteAction` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNoteAction` function with the reference provided:
5858

5959
```js {5}
6060
"use client";

src/content/versions.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ React 文档位于 [react.dev](https://react.dev),提供最新版本 React 的
1111
我们致力于在主要版本内保持文档的更新,并不会为每个次要版本或补丁版本发布单独的文档版本。当一个新的主要版本发布时,我们会将前一个版本的文档存档为 `x.react.dev`。有关更多信息,请参阅我们的[版本控制政策](/community/versioning-policy)
1212

1313
你可以在下方找到以前主要版本的存档。
14-
## 最新版本:19.0 {/*latest-version*/}
14+
## 最新版本:19.1 {/*latest-version*/}
1515

1616
- [react.dev](https://react.dev) {/*docs-19*/}
1717

@@ -51,6 +51,7 @@ React 文档位于 [react.dev](https://react.dev),提供最新版本 React 的
5151
- [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=IBBN-s77YSI)
5252

5353
**发布版本**
54+
- [v19.1.0 (March, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1910-march-28-2025)
5455
- [v19.0.0 (December, 2024)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024)
5556

5657
### React 18 {/*react-18*/}

src/sidebarBlog.json

+14
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,20 @@
1111
"path": "/blog",
1212
"skipBreadcrumb": true,
1313
"routes": [
14+
{
15+
"title": "React Compiler RC",
16+
"titleForHomepage": "React Compiler RC",
17+
"icon": "blog",
18+
"date": "April 21, 2025",
19+
"path": "/blog/2025/04/21/react-compiler-rc"
20+
},
21+
{
22+
"title": "Sunsetting Create React App",
23+
"titleForHomepage": "Sunsetting Create React App",
24+
"icon": "blog",
25+
"date": "February 14, 2025",
26+
"path": "/blog/2025/02/14/sunsetting-create-react-app"
27+
},
1428
{
1529
"title": "React 19",
1630
"titleForHomepage": "React 19",

0 commit comments

Comments
 (0)