Skip to content

Commit ba65175

Browse files
authored
docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ 6ae99dd (#1644)
2 parents 933106a + 98c47ff commit ba65175

23 files changed

Lines changed: 166 additions & 170 deletions

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ This repo contains the source code and documentation powering [react.dev](https:
1919
### Prerequisites
2020

2121
1. Git
22-
1. Node: any 12.x version starting with v12.0.0 or greater
22+
1. Node: any version starting with v16.8.0 or greater
2323
1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
2424
1. A fork of the repo (for any contributions)
2525
1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine

public/images/team/lauren.jpg

949 KB
Loading

src/content/blog/2024/04/25/react-19-upgrade-guide.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ This will run the following codemods from `react-codemod`:
113113
- [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref)
114114
- [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import)
115115
- [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state)
116-
- [`prop-types-typescript`](TODO)
116+
- [`prop-types-typescript`](https://codemod.com/registry/react-prop-types-typescript)
117117

118118
This does not include the TypeScript changes. See [TypeScript changes](#typescript-changes) below.
119119

src/content/community/conferences.md

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,62 +10,73 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
1010

1111
## Upcoming Conferences {/*upcoming-conferences*/}
1212

13-
### React Universe Conf 2024 {/*react-universe-conf-2024*/}
14-
September 5-6, 2024. Wrocław, Poland.
13+
### React Day Berlin 2024 {/*react-day-berlin-2024*/}
14+
December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)
1515

16-
[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
16+
[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)
1717

18-
### React Alicante 2024 {/*react-alicante-2024*/}
19-
September 19-21, 2024. Alicante, Spain.
18+
### App.js Conf 2025 {/*appjs-conf-2025*/}
19+
May 28 - 30, 2025. In-person in Kraków, Poland + remote
2020

21-
[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
21+
[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
2222

23-
### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/}
24-
October 04 - 05, 2024. Nairobi, Kenya
23+
### React Summit 2025 {/*react-summit-2025*/}
24+
June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
2525

26-
[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
26+
[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
2727

28-
### React India 2024 {/*react-india-2024*/}
29-
October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
28+
## Past Conferences {/*past-conferences*/}
3029

31-
[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
30+
### React Africa 2024 {/*react-africa-2024*/}
31+
November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
3232

33-
### React Brussels 2024 {/*react-brussels-2024*/}
34-
October 18, 2024. In-person in Brussels, Belgium (hybrid event)
33+
[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
3534

36-
[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)
35+
### React Summit US 2024 {/*react-summit-us-2024*/}
36+
November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
3737

38-
### reactjsday 2024 {/*reactjsday-2024*/}
39-
October 25, 2024. In-person in Verona, Italy + online (hybrid event)
38+
[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
4039

41-
[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
40+
### React Native London Conf 2024 {/*react-native-london-2024*/}
41+
November 14 & 15, 2024. In-person in London, UK
42+
43+
[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf)
4244

4345
### React Advanced London 2024 {/*react-advanced-london-2024*/}
4446
October 25 & 28, 2024. In-person in London, UK + online (hybrid event)
4547

4648
[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
4749

48-
### React Native London Conf 2024 {/*react-native-london-2024*/}
49-
November 14 & 15, 2024. In-person in London, UK
50+
### reactjsday 2024 {/*reactjsday-2024*/}
51+
October 25, 2024. In-person in Verona, Italy + online (hybrid event)
5052

51-
[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf)
53+
[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
5254

53-
### React Summit US 2024 {/*react-summit-us-2024*/}
54-
November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
55+
### React Brussels 2024 {/*react-brussels-2024*/}
56+
October 18, 2024. In-person in Brussels, Belgium (hybrid event)
5557

56-
[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
58+
[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)
5759

58-
### React Africa 2024 {/*react-africa-2024*/}
59-
November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
60+
### React India 2024 {/*react-india-2024*/}
61+
October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
6062

61-
[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
63+
[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
6264

63-
### React Day Berlin 2024 {/*react-day-berlin-2024*/}
64-
December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)
65+
### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/}
66+
October 04 - 05, 2024. Nairobi, Kenya
6567

66-
[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)
68+
[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
69+
70+
### React Alicante 2024 {/*react-alicante-2024*/}
71+
September 19-21, 2024. Alicante, Spain.
72+
73+
[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
74+
75+
### React Universe Conf 2024 {/*react-universe-conf-2024*/}
76+
September 5-6, 2024. Wrocław, Poland.
77+
78+
[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
6779

68-
## Past Conferences {/*past-conferences*/}
6980

7081
### React Rally 2024 🐙 {/*react-rally-2024*/}
7182
August 12-13, 2024. Park City, UT, USA

src/content/community/team.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ React 核心团队成员全职致力于核心组件 API 的开发,负责 React
4343
</TeamMember>
4444

4545
<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" bsky="no.lol" title="Engineer at Meta">
46-
Lauren's programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel instead of Java. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, and petting her dog Zelda.
46+
Lauren's programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, learning Korean, and petting her dog Zelda.
4747
</TeamMember>
4848

4949
<TeamMember name="Luna Wei" permalink="luna-wei" photo="/images/team/luna-wei.jpg" github="lunaleaps" twitter="lunaleaps" threads="lunaleaps" title="Engineer at Meta">

src/content/learn/manipulating-the-dom-with-refs.md

Lines changed: 24 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -345,75 +345,39 @@ li {
345345

346346
## 访问另一个组件的 DOM 节点 {/*accessing-another-components-dom-nodes*/}
347347

348-
当你将 ref 放在像 `<input />` 这样输出浏览器元素的内置组件上时,React 会将该 ref 的 `current` 属性设置为相应的 DOM 节点(例如浏览器中实际的 `<input />` )。
348+
<Pitfall>
349+
Ref 是一个脱围机制。手动操作 __其它__ 组件的 DOM 节点可能会让代码变得脆弱。
350+
</Pitfall>
349351

350-
但是,如果你尝试将 ref 放在 **你自己的** 组件上,例如 `<MyInput />`,默认情况下你会得到 `null`。这个示例演示了这种情况。请注意单击按钮 **并不会** 聚焦输入框:
352+
你可以 [像其它 prop 一样](/learn/passing-props-to-a-component) 将 ref 从父组件传递给子组件。
351353

352-
<Sandpack>
353-
354-
```js
354+
```js {3-4,9}
355355
import { useRef } from 'react';
356356

357-
function MyInput(props) {
358-
return <input {...props} />;
357+
function MyInput({ ref }) {
358+
return <input ref={ref} />;
359359
}
360360

361-
export default function MyForm() {
361+
function MyForm() {
362362
const inputRef = useRef(null);
363-
364-
function handleClick() {
365-
inputRef.current.focus();
366-
}
367-
368-
return (
369-
<>
370-
<MyInput ref={inputRef} />
371-
<button onClick={handleClick}>
372-
聚焦输入框
373-
</button>
374-
</>
375-
);
363+
return <MyInput ref={inputRef} />
376364
}
377365
```
378366

379-
</Sandpack>
380-
381-
为了帮助你注意到这个问题,React 还会向控制台打印一条错误消息:
382-
383-
<ConsoleBlock level="error">
384-
385-
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
386-
387-
</ConsoleBlock>
388-
389-
发生这种情况是因为默认情况下,React 不允许组件访问其他组件的 DOM 节点。甚至自己的子组件也不行!这是故意的。Refs 是一种脱围机制,应该谨慎使用。手动操作 **另一个** 组件的 DOM 节点会使你的代码更加脆弱。
390-
391-
相反,**想要** 暴露其 DOM 节点的组件必须**选择**该行为。一个组件可以指定将它的 ref “转发”给一个子组件。下面是 `MyInput` 如何使用 `forwardRef` API:
392-
393-
```js
394-
const MyInput = forwardRef((props, ref) => {
395-
return <input {...props} ref={ref} />;
396-
});
397-
```
398-
399-
它是这样工作的:
400-
401-
1. `<MyInput ref={inputRef} />` 告诉 React 将对应的 DOM 节点放入 `inputRef.current` 中。但是,这取决于 `MyInput` 组件是否允许这种行为, 默认情况下是不允许的。
402-
2. `MyInput` 组件是使用 `forwardRef` 声明的。 **这让从上面接收的 `inputRef` 作为第二个参数 `ref` 传入组件**,第一个参数是 `props`
403-
3. `MyInput` 组件将自己接收到的 `ref` 传递给它内部的 `<input>`
367+
在上面这个例子中,父组件创建了一个名为 `MyForm` 的 ref,并且将它传递给了 `MyInput` 子组件。`MyInput` 将这个 ref 传递给 `<input>`。因为 `<input>` 是一个 [内置组件](/reference/react-dom/components/common),React 会将 ref 的 `.current` 属性设置为这个 `<input>` DOM 元素。
404368

405-
现在,单击按钮聚焦输入框起作用了:
369+
`MyForm` 中创建的 `inputRef` 现在指向 `MyInput` 返回的 `<input>` DOM 元素。在 `MyForm` 中创建的点击处理程序可以访问 `inputRef` 并且调用 `focus()` 来将焦点设置在 `<input>` 上。
406370

407371
<Sandpack>
408372

409373
```js
410-
import { forwardRef, useRef } from 'react';
374+
import { useRef } from 'react';
411375

412-
const MyInput = forwardRef((props, ref) => {
413-
return <input {...props} ref={ref} />;
414-
});
376+
function MyInput({ ref }) {
377+
return <input ref={ref} />;
378+
}
415379

416-
export default function Form() {
380+
export default function MyForm() {
417381
const inputRef = useRef(null);
418382

419383
function handleClick() {
@@ -433,33 +397,27 @@ export default function Form() {
433397

434398
</Sandpack>
435399

436-
在设计系统中,将低级组件(如按钮、输入框等)的 ref 转发到它们的 DOM 节点是一种常见模式。另一方面,像表单、列表或页面段落这样的高级组件通常不会暴露它们的 DOM 节点,以避免对 DOM 结构的意外依赖。
437-
438400
<DeepDive>
439401

440402
#### 使用命令句柄暴露一部分 API {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
441403

442-
在上面的例子中,`MyInput` 暴露了原始的 DOM 元素 input。这让父组件可以对其调用`focus()`。然而,这也让父组件能够做其他事情 —— 例如,改变其 CSS 样式。在一些不常见的情况下,你可能希望限制暴露的功能。你可以用 `useImperativeHandle` 做到这一点
404+
在上面的例子中,`MyInput` 暴露了原始的 DOM 元素 input。这让父组件可以对其调用`focus()`。然而,这也让父组件能够做其他事情 —— 例如,改变其 CSS 样式。在一些不常见的情况下,你可能希望限制暴露的功能。你可以用 [`useImperativeHandle`](/reference/react/useImperativeHandle) 来做到这一点
443405

444406
<Sandpack>
445407

446408
```js
447-
import {
448-
forwardRef,
449-
useRef,
450-
useImperativeHandle
451-
} from 'react';
409+
import { useRef, useImperativeHandle } from "react";
452410

453-
const MyInput = forwardRef((props, ref) => {
411+
function MyInput({ ref }) {
454412
const realInputRef = useRef(null);
455413
useImperativeHandle(ref, () => ({
456414
// 只暴露 focus,没有别的
457415
focus() {
458416
realInputRef.current.focus();
459417
},
460418
}));
461-
return <input {...props} ref={realInputRef} />;
462-
});
419+
return <input ref={realInputRef} />;
420+
};
463421

464422
export default function Form() {
465423
const inputRef = useRef(null);
@@ -471,17 +429,15 @@ export default function Form() {
471429
return (
472430
<>
473431
<MyInput ref={inputRef} />
474-
<button onClick={handleClick}>
475-
聚焦输入框
476-
</button>
432+
<button onClick={handleClick}>聚焦输入框</button>
477433
</>
478434
);
479435
}
480436
```
481437

482438
</Sandpack>
483439

484-
这里,`MyInput` 中的 `realInputRef` 保存了实际的 input DOM 节点。 但是,`useImperativeHandle` 指示 React 将你自己指定的对象作为父组件的 ref 值。 所以 `Form` 组件内的 `inputRef.current` 将只有 `focus` 方法。在这种情况下,ref “句柄”不是 DOM 节点,而是你在 `useImperativeHandle` 调用中创建的自定义对象。
440+
这里,`MyInput` 中的 `realInputRef` 保存了实际的 input DOM 节点。 但是,[`useImperativeHandle`](/reference/react/useImperativeHandle) 指示 React 将你自己指定的对象作为父组件的 ref 值。 所以 `Form` 组件内的 `inputRef.current` 将只有 `focus` 方法。在这种情况下,ref “句柄”不是 DOM 节点,而是你在 [`useImperativeHandle`](/reference/react/useImperativeHandle) 调用中创建的自定义对象。
485441

486442
</DeepDive>
487443

@@ -593,7 +549,7 @@ export default function TodoList() {
593549
const newTodo = { id: nextId++, text: text };
594550
flushSync(() => {
595551
setText('');
596-
setTodos([ ...todos, newTodo]);
552+
setTodos([ ...todos, newTodo]);
597553
});
598554
listRef.current.lastChild.scrollIntoView({
599555
behavior: 'smooth',

src/content/learn/react-compiler.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -348,7 +348,7 @@ React Compiler 可以静态验证 React 的许多规则,并且在检测到错
348348

349349
### 我如何知道我的组件已被优化? {/*how-do-i-know-my-components-have-been-optimized*/}
350350

351-
[React 开发工具](/learn/react-developer-tools)(v5.0 及以上版本)对 React Compiler 有内置支持,并会在已被编译器优化的组件旁边显示“Memo ✨”徽章。
351+
[React DevTools](/learn/react-developer-tools)(v5.0+)和 [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) 内置支持 React Compiler,并会在已被编译器优化的组件旁边显示“Memo ✨”徽章。
352352

353353
### 编译后某些内容无法正常工作 {/*something-is-not-working-after-compilation*/}
354354
如果你安装了 eslint-plugin-react-compiler ,编译器将在你的编辑器中显示任何违反 React 规则的情况。当它这样做时,意味着编译器跳过了对该组件或钩子的优化。这完全没问题,并且编译器可以恢复并继续优化你代码库中的其他组件。**你不必立即修复所有的违反 ESLint 规则的代码。** 你可以按照自己的节奏来处理它们,以增加被优化的组件和钩子的数量。

src/content/reference/react-dom/components/form.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ To create interactive controls for submitting information, render the [built-in
5050

5151
### Handle form submission on the client {/*handle-form-submission-on-the-client*/}
5252

53-
Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs.
53+
Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. After the `action` function succeeds, all uncontrolled field elements in the form are reset.
5454

5555
<Sandpack>
5656

@@ -117,7 +117,7 @@ function AddToCart({productId}) {
117117
}
118118
```
119119

120-
When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-function) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
120+
When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-functions) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
121121

122122
### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
123123
To display a pending state when a form is being submitted, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.

src/content/reference/react-dom/components/link.md

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export default function SiteMapPage() {
151151

152152
### 控制样式表优先级 {/*controlling-stylesheet-precedence*/}
153153

154-
样式表可能会相互冲突,当发生冲突时,浏览器会选择文档中排在后面的样式表。React 允许使用 `precedence` 属性来控制样式表的顺序。在这个例子中,两个组件渲染样式表,具有较高优先级的组件在文档中排在较后位置,即使渲染它的组件出现在较早位置
154+
样式表可能会相互冲突,当发生冲突时,浏览器会选择文档中排在后面的样式表。React 允许使用 `precedence` 属性来控制样式表的顺序。在这个例子中,三个组件渲染样式表,具有相同优先级的组件在 `<head>` 中将会被分组在一起
155155

156156
{/*FIXME: this doesn't appear to actually work -- I guess precedence isn't implemented yet?*/}
157157

@@ -165,23 +165,30 @@ export default function HomePage() {
165165
<ShowRenderedHTML>
166166
<FirstComponent />
167167
<SecondComponent />
168+
<ThirdComponent/>
168169
...
169170
</ShowRenderedHTML>
170171
);
171172
}
172173

173174
function FirstComponent() {
174-
return <link rel="stylesheet" href="first.css" precedence="high" />;
175+
return <link rel="stylesheet" href="first.css" precedence="first" />;
175176
}
176177

177178
function SecondComponent() {
178-
return <link rel="stylesheet" href="second.css" precedence="low" />;
179+
return <link rel="stylesheet" href="second.css" precedence="second" />;
180+
}
181+
182+
function ThirdComponent() {
183+
return <link rel="stylesheet" href="third.css" precedence="first" />;
179184
}
180185

181186
```
182187

183188
</SandpackWithHTMLOutput>
184189

190+
Note the `precedence` values themselves are arbitrary and their naming is up to you. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher".
191+
185192
### 去除样式表的重复渲染 {/*deduplicated-stylesheet-rendering*/}
186193

187194
如果在多个组件渲染相同的样式表,React 将只在文档头部放置单个 `<link>`

0 commit comments

Comments
 (0)