-
+
-我们在 React Conf 2024 上宣布了 React Compiler 的实验性版本。从那时起我们已经取得了很多进展，在这篇文章中，我们将分享 React Compiler 下一步要做的事情……
+在我们的 React 19 升级指南中, 我们分享了将应用程序升级到 React 19 的分步说明。在这篇文章中，我们将概述 React 19 的新特性，以及如何使用它们……
-
+
-上周我们在内华达州亨德森举办了为期两天的 React Conf 2024 大会，有 700 多名与会者亲临现场，讨论 UI 工程领域的最新进展。这是我们自 2019 年以来首次举办线下会议，我们很高兴能够再次将社区团结在一起……
+我们在 React Conf 2024 上宣布了 React Compiler 的实验性版本。从那时起我们已经取得了很多进展，在这篇文章中，我们将分享 React Compiler 下一步要做的事情……
-
+
-在我们的 React 19 RC 升级指南中, 我们分享了将应用程序升级到 React 19 的分步说明。在这篇文章中，我们将概述 React 19 的新特性，以及如何使用它们……
+上周我们在内华达州亨德森举办了为期两天的 React Conf 2024 大会，有 700 多名与会者亲临现场，讨论 UI 工程领域的最新进展。这是我们自 2019 年以来首次举办线下会议，我们很高兴能够再次将社区团结在一起……
-
+
React 19 中新增的改进需要一些破坏性变更，但我们已经尽力让升级过程尽可能平滑，我们预计这些变更不会影响大多数应用。在这篇文章中，我们将指导你完成将库升级到 React 19 的步骤……
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index f255a69940..fe0668c5aa 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -258,11 +258,11 @@ export default function CatFriends() {
key={cat}
ref={(node) => {
const map = getMap();
- if (node) {
- map.set(cat, node);
- } else {
+ map.set(cat, node);
+
+ return () => {
map.delete(cat);
- }
+ };
}}
>
@@ -311,16 +311,6 @@ li {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- }
-}
-```
-
在这个例子中，`itemsRef` 保存的不是单个 DOM 节点，而是保存了包含列表项 ID 和 DOM 节点的 [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map)。([Ref 可以保存任何值！](/learn/referencing-values-with-refs)) 每个列表项上的 [`ref` 回调](/reference/react-dom/components/common#ref-callback)负责更新 Map：
@@ -330,40 +320,26 @@ li {
key={cat.id}
ref={node => {
const map = getMap();
- if (node) {
- // Add to the Map
- map.set(cat, node);
- } else {
- // Remove from the Map
+ // 添加到 Map 中
+ map.set(cat, node);
+
+ return () => {
+ // 从 Map 中移除
map.delete(cat);
- }
+ };
}}
>
```
这使你可以之后从 Map 读取单个 DOM 节点。
-
+
-这个例子展示了另一种使用 `ref` 回调清理函数来管理 Map 的方法。
+启用严格模式后，ref 回调将在开发中运行两次。
-```js
- {
- const map = getMap();
- // Add to the Map
- map.set(cat, node);
-
- return () => {
- // Remove from the Map
- map.delete(cat);
- };
- }}
->
-```
+阅读更多这将 [如何帮助你在 ref 回调中找到 bug](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) 的细节。
-
+
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index 67751950e5..dc69de27c7 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -45,8 +45,8 @@ root.render(
-
-`onUncaughtError` is only available in the latest React Canary release.
-
-
-
By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
@@ -578,28 +572,11 @@ export default function App() {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js"
-}
-```
-
### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
-
-
-`onCaughtError` is only available in the latest React Canary release.
-
-
-
By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option to handle errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
@@ -865,8 +842,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
- "react": "canary",
- "react-dom": "canary",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
@@ -1123,8 +1100,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
- "react": "canary",
- "react-dom": "canary",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index db2a9072bb..729ca5ca3c 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -43,8 +43,8 @@ React 将会连接到内部有 `domNode` 的 HTML 上，然后接管其中的 `d
* **可选** `options`：一个包含此 React 根元素选项的对象。
- *
-
-`onUncaughtError` is only available in the latest React Canary release.
-
-
-
By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
```js [[1, 7, "onUncaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
@@ -614,28 +608,11 @@ export default function App() {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js"
-}
-```
-
### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
-
-
-`onCaughtError` is only available in the latest React Canary release.
-
-
-
By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option for errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
@@ -904,8 +881,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
- "react": "canary",
- "react-dom": "canary",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
@@ -1166,8 +1143,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
- "react": "canary",
- "react-dom": "canary",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index f7e6208872..8a6ad6a3af 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -246,43 +246,41 @@ title: "普通组件（例如
）"
与 [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref) 返回的 ref 对象不同，可以将函数传递给 `ref` 属性。
```js
-
console.log(node)} />
+
{
+ console.log('Attached', node);
+
+ return () => {
+ console.log('Clean up', node)
+ }
+}}>
```
-[查看使用 `ref` 回调函数的示例](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)。
+[查看使用 `ref` 回调函数的示例](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
-当 `
` DOM 节点被添加到屏幕上时，React 将使用该节点作为参数调用 `ref` 回调函数。
+当 `
` DOM 节点被添加到屏幕上时，React 将使用该节点作为参数调用 `ref` 回调函数。当这个 `
` DOM 节点被移除的时候， React 将调用回调返回的清理函数。
当传递不同的` ref `回调时，React 也会调用 `ref` 回调。在上面的示例中，`(node) => { ... }` 在每次渲染时都是一个不同的函数。当组件重新渲染时，先前的函数将被调用并传递 `null` 作为参数，并且下一个函数将被调用并传递对应 DOM 节点作为参数。
#### 参数 {/*ref-callback-parameters*/}
-* `node`：DOM 节点或 `null`。当回调函数被附加在 `ref` 属性后，触发回调时，该参数为对应的 DOM 节点。当 ref 被分离时值为 `null`。除非在每次渲染时都传递相同的函数引用作为 `ref` 回调，否则该回调将在组件的每次重新渲染期间被暂时分离和重新连接。
+* `node`: DOM 节点。当 ref 被附加时，React 会向你传递 DOM 节点作为参数。除非你在每次渲染时为 `ref` 的回调函数传递相同引用，否则回调将在组件的每次重新渲染期间临时清理并重新创建。
-
+
-#### 返回值 {/*returns*/}
+#### React 19 添加了 `ref` 回调的清理函数。{/*react-19-added-cleanup-functions-for-ref-callbacks*/}
-* **optional** `cleanup function`: When the `ref` is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with `null` as the argument when the `ref` gets detached.
+为了向后兼容，如果 `ref` 回调未返回清理函数，当 `ref` 被分离时 `node` 会被作为 `null` 传递。此行为将在未来版本中删除。
-```js
+
-
{
- console.log(node);
-
- return () => {
- console.log('Clean up', node)
- }
-}}>
+#### 返回值 {/*returns*/}
-```
+* **可选的** `清理函数`：当 `ref` 被分离时，React 会调用清理函数。如果 `ref` 回调未返回清理函数，React 会再次使用 `null` 作为参数调用回调函数。此行为将在未来版本中删除。
#### Caveats {/*caveats*/}
* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.
-* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If not cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node.
-
-
+* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If no cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node.
---
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 8f6ab00e00..047b65aa7e 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -1,15 +1,7 @@
---
title: "