diff --git a/src/content/blog/2022/03/08/react-18-upgrade-guide.md b/src/content/blog/2022/03/08/react-18-upgrade-guide.md index 6a8b335dae..05d834e454 100644 --- a/src/content/blog/2022/03/08/react-18-upgrade-guide.md +++ b/src/content/blog/2022/03/08/react-18-upgrade-guide.md @@ -103,7 +103,7 @@ root.render(); -最后如果应用通过 hydrate 使用了服务端渲染,你需要将 `hydrate` 升级到 `hydrateRoot`: +最后如果应用通过激活使用了服务端渲染,你需要将 `hydrate` 升级到 `hydrateRoot`: ```js // 之前 @@ -306,7 +306,7 @@ globalThis.IS_REACT_ACT_ENVIRONMENT = true; ## 其他破坏性变更 {/*other-breaking-changes*/} * **一致的 useEffect 时间**:现在,如果更新是在类似点击或者敲击键盘事件这样的离散用户输入事件期间触发,React 总是同步刷新 Effect 函数。而之前的行为不是一直可预测或者一致的。 -* **更严格的 hydrate 报错**:由于缺失或者额外的文本而导致的 hydrate 不匹配现在会作为错误而不是告警对待。React 将不再试图通过在客户端增加或删除节点来“修补”单个节点来匹配服务端标记,并且将会回退客户端渲染到树中最近的 `` 边界。这可以保证 hydrate 树保持一致并且避免可能由 hydrate 不匹配导致的隐私和安全漏洞。 +* **更严格的激活报错**:由于缺失或者额外的文本而导致的激活内容不匹配现在会作为错误而不是告警对待。React 将不再试图通过在客户端增加或删除节点来“修补”单个节点来匹配服务端标记,并且将会回退客户端渲染到树中最近的 `` 边界。这可以保证激活树保持一致并且避免可能由激活内容不匹配导致的隐私和安全漏洞。 * **Suspense 树一直保持一致**:如果一个组件在它完全被添加到树上之前挂起,React 将不会把它以不完整的状态添加到树或者触发它的 effect。React 会完全扔掉新树,等待异步操作结束,然后重新尝试从头开始再次渲染。React 会同时渲染重试尝试,并且不会阻塞浏览器。 * **使用 Suspense 的 Layout Effect**:当一个树重新挂起并恢复为后备方案时,现在的 React 会清理 layout effect,然后在边界内的内容再次显示时重新创建它们。这修复了一个在与 Suspense 一起使用时的问题:阻止组件库正确测量布局。 * **新的 JavaScript 环境要求**:React 现在依赖于现代浏览器特性,包括 `Promise`、`Symbol` 和 `Object.assign`。如果你需要支持像 Internet Explorer 这样较老版本的浏览器和设备,它们本身不提供现代浏览器特性或者有不兼容的实现,可以考虑在打包后的应用中包含全局的 polyfill。 diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md index a66d85e2c2..542bf8a5c6 100644 --- a/src/content/blog/2022/03/29/react-v18.md +++ b/src/content/blog/2022/03/29/react-v18.md @@ -180,7 +180,7 @@ React 18 中的 Suspense 在与 Transition API 结合时效果最好。如果你 * `createRoot`:为 `render` 或者 `unmount` 创建根节点的新方法。请用它替代 `ReactDOM.render`。如果没有它,React 18 中的新功能就无法生效。 * `hydrateRoot`:hydrate 服务端渲染的应用的新方法。使用它来替代 `ReactDOM.hydrate` 与新的 React DOM 服务端 API 一起使用。如果没有它,React 18 中的新功能就无法生效。 -`createRoot` 和 `hydrateRoot` 都能接受一个新的可选参数叫做 `onRecoverableError`,它能在 React 在渲染或者 hydrate 过程发生错误后又恢复时,做日志记录对你进行通知。默认情况下,React 会使用 [`reportError`](https://developer.mozilla.org/en-US/docs/Web/API/reportError),如果在老旧版本浏览器中,则会使用 `console.error`。 +`createRoot` 和 `hydrateRoot` 都能接受一个新的可选参数叫做 `onRecoverableError`,它能在 React 在渲染或者激活过程发生错误后又恢复时,做日志记录对你进行通知。默认情况下,React 会使用 [`reportError`](https://developer.mozilla.org/en-US/docs/Web/API/reportError),如果在老旧版本浏览器中,则会使用 `console.error`。 [参阅 React DOM Client 的文档](/reference/react-dom/client)。 @@ -232,7 +232,7 @@ React 18 中的 Suspense 在与 Transition API 结合时效果最好。如果你 #### useId {/*useid*/} -`useId` 是一个新的Hook,用于生成在客户端和服务端两侧都独一无二的 id,避免 hydrate 后两侧内容不匹配。它主要用于需要唯一 id 的,具有集成 API 的组件库。这个更新不仅解决了一个在 React 17 及更低版本中的存在的问题,而且它会在 React 18 中发挥更重要的作用,因为新的流式服务端渲染响应 HTML 的方式将是无序的,需要独一无二的 id 作为索引。[参阅文档](/reference/react/useId)。 +`useId` 是一个新的Hook,用于生成在客户端和服务端两侧都独一无二的 id,避免激活后两侧内容不匹配。它主要用于需要唯一 id 的,具有集成 API 的组件库。这个更新不仅解决了一个在 React 17 及更低版本中的存在的问题,而且它会在 React 18 中发挥更重要的作用,因为新的流式服务端渲染响应 HTML 的方式将是无序的,需要独一无二的 id 作为索引。[参阅文档](/reference/react/useId)。 > Note > @@ -299,12 +299,12 @@ React 18 中的 Suspense 在与 Transition API 结合时效果最好。如果你 * 修复生成的 License 头。([#23004](https://github.com/facebook/react/pull/23004) [@vitaliemiron](https://github.com/vitaliemiron)) * 添加 `package.json` 作为入口点之一。 ([#22954](https://github.com/facebook/react/pull/22954) [@Jack](https://github.com/Jack-Works)) * 允许在 Suspense 边界外挂起。([#23267](https://github.com/facebook/react/pull/23267) [@acdlite](https://github.com/acdlite)) -* 每当 hydrate 失败时记录一个可恢复的错误。([#23319](https://github.com/facebook/react/pull/23319) [@acdlite](https://github.com/acdlite)) +* 每当激活失败时记录一个可恢复的错误。([#23319](https://github.com/facebook/react/pull/23319) [@acdlite](https://github.com/acdlite)) ### React DOM {/*react-dom*/} * 添加 `createRoot` 和 `hydrateRoot`。([#10239](https://github.com/facebook/react/pull/10239),[#11225](https://github.com/facebook/react/pull/11225),[#12117](https://github.com/facebook/react/pull/12117),[#13732](https://github.com/facebook/react/pull/13732),[#15502](https://github.com/facebook/react/pull/15502),[#15532](https://github.com/facebook/react/pull/15532),[#17035](https://github.com/facebook/react/pull/17035),[#17165](https://github.com/facebook/react/pull/17165),[#20669](https://github.com/facebook/react/pull/20669),[#20748](https://github.com/facebook/react/pull/20748),[#20888](https://github.com/facebook/react/pull/20888),[#21072](https://github.com/facebook/react/pull/21072),[#21417](https://github.com/facebook/react/pull/21417),[#21652](https://github.com/facebook/react/pull/21652),[#21687](https://github.com/facebook/react/pull/21687),[#23207](https://github.com/facebook/react/pull/23207),[#23385](https://github.com/facebook/react/pull/23385) [@acdlite](https://github.com/acdlite),[@bvaughn](https://github.com/bvaughn),[@gaearon](https://github.com/gaearon),[@lunaruan](https://github.com/lunaruan),[@rickhanlonii](https://github.com/rickhanlonii),[@trueadm](https://github.com/trueadm),and [@sebmarkbage](https://github.com/sebmarkbage)) -* 添加选择性 hydrate。([#14717](https://github.com/facebook/react/pull/14717),[#14884](https://github.com/facebook/react/pull/14884),[#16725](https://github.com/facebook/react/pull/16725),[#16880](https://github.com/facebook/react/pull/16880),[#17004](https://github.com/facebook/react/pull/17004),[#22416](https://github.com/facebook/react/pull/22416),[#22629](https://github.com/facebook/react/pull/22629),[#22448](https://github.com/facebook/react/pull/22448),[#22856](https://github.com/facebook/react/pull/22856),[#23176](https://github.com/facebook/react/pull/23176) [@acdlite](https://github.com/acdlite),[@gaearon](https://github.com/gaearon),[@salazarm](https://github.com/salazarm),and [@sebmarkbage](https://github.com/sebmarkbage)) +* 添加选择性激活。([#14717](https://github.com/facebook/react/pull/14717),[#14884](https://github.com/facebook/react/pull/14884),[#16725](https://github.com/facebook/react/pull/16725),[#16880](https://github.com/facebook/react/pull/16880),[#17004](https://github.com/facebook/react/pull/17004),[#22416](https://github.com/facebook/react/pull/22416),[#22629](https://github.com/facebook/react/pull/22629),[#22448](https://github.com/facebook/react/pull/22448),[#22856](https://github.com/facebook/react/pull/22856),[#23176](https://github.com/facebook/react/pull/23176) [@acdlite](https://github.com/acdlite),[@gaearon](https://github.com/gaearon),[@salazarm](https://github.com/salazarm),and [@sebmarkbage](https://github.com/sebmarkbage)) * 在已知的 ARIA 属性列表中增加 `aria-description`。([#22142](https://github.com/facebook/react/pull/22142) [@mahyareb](https://github.com/mahyareb)) * 为 video 元素添加 `onResize` 事件。([#21973](https://github.com/facebook/react/pull/21973) [@rileyjshaw](https://github.com/rileyjshaw)) * 将 `imageSizes` 和 `imageSrcSet` 添加到已知属性中。([#22550](https://github.com/facebook/react/pull/22550) [@eps1lon](https://github.com/eps1lon)) diff --git a/src/content/blog/2024/04/25/react-19.md b/src/content/blog/2024/04/25/react-19.md index a87b711b5f..d8be8e0081 100644 --- a/src/content/blog/2024/04/25/react-19.md +++ b/src/content/blog/2024/04/25/react-19.md @@ -378,7 +378,7 @@ function MyInput({placeholder, ref}) { -### hydration 错误的差异 {/*diffs-for-hydration-errors*/} +### 激活错误的差异 {/*diffs-for-hydration-errors*/} 在 `react-dom` 中,我们也改进了水合错误的错误报告。例如,现在不再在 DEV 中记录多个没有任何不匹配信息的错误: @@ -682,11 +682,11 @@ function MyComponent() { ### 兼容第三方脚本和扩展 {/*compatibility-with-third-party-scripts-and-extensions*/} -我们改进了 hydration,以考虑第三方脚本和浏览器扩展。 +我们改进了激活机制,以考虑第三方脚本和浏览器扩展。 -在 hydration 过程中,如果在客户端渲染的元素与从服务器获取的 HTML 中找到的元素不匹配,React 将强制进行客户端重新渲染以修复内容。以前,如果一个元素是由第三方脚本或浏览器扩展插入的,它会触发一个不匹配的错误并进行客户端渲染。 +在激活过程中,如果在客户端渲染的元素与从服务器获取的 HTML 中找到的元素不匹配,React 将强制进行客户端重新渲染以修复内容。以前,如果一个元素是由第三方脚本或浏览器扩展插入的,它会触发一个不匹配的错误并进行客户端渲染。 -在 React 19 中,`` 和 `` 中的意外标签将被跳过,避免了不匹配的错误。如果 React 需要由于无关的 hydration 不匹配而重新渲染整个文档,它将保留由第三方脚本和浏览器扩展插入的样式表。 +在 React 19 中,`` 和 `` 中的意外标签将被跳过,避免了不匹配的错误。如果 React 需要由于无关的激活不匹配而重新渲染整个文档,它将保留由第三方脚本和浏览器扩展插入的样式表。 ### 更好的错误报告 {/*error-handling*/} diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 9b09210a80..db2a9072bb 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -56,7 +56,7 @@ React 将会连接到内部有 `domNode` 的 HTML 上,然后接管其中的 `d #### 警告 {/*caveats*/} * `hydrateRoot()` 期望渲染内容与服务端渲染的内容完全相同。你应该将不匹配视为错误并进行修复。 -* 在开发模式下,React 会在 hydrate 期间发出不匹配警告。在不匹配的情况下,不能保证内容差异会被修补。出于性能原因,这很重要,因为在大多数应用程序中,不匹配很少见,因此验证所有标记将是昂贵而不可行的。 +* 在开发模式下,React 会在激活期间发出不匹配警告。在不匹配的情况下,不能保证内容差异会被修补。出于性能原因,这很重要,因为在大多数应用程序中,不匹配很少见,因此验证所有标记将是昂贵而不可行的。 * 你的应用程序可能只有一个 `hydrateRoot()` 函数调用。如果你使用框架,则可能会为你完成此调用。 * 如果你的应用程序是客户端渲染,并且没有已渲染好的 HTML,则不支持使用 `hydrateRoot()`。请改用 [`createRoot()`](/reference/react-dom/client/createRoot)。 @@ -64,13 +64,13 @@ React 将会连接到内部有 `domNode` 的 HTML 上,然后接管其中的 `d ### `root.render(reactNode)` {/*root-render*/} -使用 `root.render` 更新一个 hydrate 根组件中的 React 组件来渲染浏览器端 DOM 元素。 +使用 `root.render` 更新一个激活根组件中的 React 组件来渲染浏览器端 DOM 元素。 ```js root.render(); ``` -React 将会在 hydrate `root` 中更新 ``。 +React 将会在激活 `root` 中更新 ``。 [参见下面更多示例](#usage)。 @@ -85,7 +85,7 @@ React 将会在 hydrate `root` 中更新 ``。 #### 警告 {/*root-render-caveats*/} -* 如果你在根节点还没有完成 hydrate 的情况下调用了 `root.render`,React 将清除现有的服务端渲染 HTML 内容,并将整个根节点切换到客户端渲染。 +* 如果你在根节点还没有完成激活的情况下调用了 `root.render`,React 将清除现有的服务端渲染 HTML 内容,并将整个根节点切换到客户端渲染。 --- @@ -123,7 +123,7 @@ root.unmount(); ## 用法 {/*usage*/} -### hydrate 服务端渲染的 HTML {/*hydrating-server-rendered-html*/} +### 激活服务端渲染的 HTML {/*hydrating-server-rendered-html*/} 如果你的应用程序的 HTML 是由 [`react-dom/server`](/reference/react-dom/client/createRoot) 生成的,你需要在客户端上进行 **hydrate**。 @@ -133,9 +133,9 @@ import { hydrateRoot } from 'react-dom/client'; hydrateRoot(document.getElementById('root'), ); ``` -对于你的应用程序来说,这将 hydrate 你的服务端 HTML 来复苏里面的 浏览器 DOM 节点React 组件。通常,你只需要在启动时执行一次。如果你使用框架,则可能会自动在幕后执行此操作。 +对于你的应用程序来说,这将激活你的服务端 HTML 来复苏里面的 浏览器 DOM 节点React 组件。通常,你只需要在启动时执行一次。如果你使用框架,则可能会自动在幕后执行此操作。 -为了进行 hydrate,React 将把你的组件逻辑连接到服务器上生成的初始 HTML 中。hydrate 可以将来自服务器的初始 HTML 快照转换为在浏览器中运行的完全可交互应用。 +为了进行激活,React 将把你的组件逻辑连接到服务器上生成的初始 HTML 中。激活可以将来自服务器的初始 HTML 快照转换为在浏览器中运行的完全可交互应用。 @@ -190,20 +190,20 @@ function Counter() { 这对于用户体验非常重要。用户会在你的 JavaScript 代码加载前花费一些时间来查看服务端生成的 HTML。服务端渲染通过显示应用输出的 HTML 快照来产生了应用程序加速加载的错觉。突然出现不同的内容会破坏这种错觉。这就是为什么服务端渲染输出必须与客户端初始渲染输出匹配。 -导致 hydrate 错误的最常见原因包括: +导致激活错误的最常见原因包括: * 根节点 React 生成的 HTML 周围存在额外的空白符(如换行符)。 * 在渲染逻辑中使用 `typeof window !== 'undefined'` 这样的判断。 * 在渲染逻辑中使用仅限于浏览器端的 API,例如 [`window.matchMedia`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia)。 * 在服务器和客户端渲染不同的数据。 -React 可以从一些 hydrate 错误中恢复,但 **你必须像处理其他 bug 一样修复它们**。在最好的情况下,它们会导致应用程序加载变慢;在最坏的情况下,事件处理程序可能会附加到错误的元素上。 +React 可以从一些激活错误中恢复,但 **你必须像处理其他 bug 一样修复它们**。在最好的情况下,它们会导致应用程序加载变慢;在最坏的情况下,事件处理程序可能会附加到错误的元素上。 --- -### hydrate 整个文档 {/*hydrating-an-entire-document*/} +### 激活整个文档 {/*hydrating-an-entire-document*/} 完全使用 React 构建的应用程序可以将整个文档作为 JSX 渲染,包括 [``](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/html) 标签: @@ -225,7 +225,7 @@ function App() { } ``` -要对整个文档进行 hydrate 处理,将全局的 [`document`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/document) 作为 `hydrateRoot` 的第一个参数传递: +要对整个文档进行激活处理,将全局的 [`document`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/document) 作为 `hydrateRoot` 的第一个参数传递: ```js {4} import { hydrateRoot } from 'react-dom/client'; @@ -236,11 +236,11 @@ hydrateRoot(document, ); --- -### 抑制不可避免的 hydrate 处理不匹配错误 {/*suppressing-unavoidable-hydration-mismatch-errors*/} +### 抑制不可避免的激活处理不匹配错误 {/*suppressing-unavoidable-hydration-mismatch-errors*/} -如果一个单独元素属性或文本内容在服务器和客户端之间是不可避免地不同的(例如,时间戳),则可以抑制 hydrate 处理不匹配警告。 +如果一个单独元素属性或文本内容在服务器和客户端之间是不可避免地不同的(例如,时间戳),则可以抑制激活处理不匹配警告。 -要消除对元素的 hydrate 处理警告,请添加 `suppressHydrationWarning={true}`: +要消除对元素的激活处理警告,请添加 `suppressHydrationWarning={true}`: @@ -318,21 +318,21 @@ export default function App() { -这样,初始渲染将呈现与服务器相同的内容,避免不匹配,但是在 hydrate 之后会同步进行额外的渲染。 +这样,初始渲染将呈现与服务器相同的内容,避免不匹配,但是在激活之后会同步进行额外的渲染。 -这种方法使得 hydrate 变慢,因为你的组件需要渲染两次。要注意在网络连接较慢的情况下用户的体验。JavaScript 代码的加载时间可能会比初始的 HTML 渲染慢很多,因此在 hydrate 之后立即呈现不同的 UI 对用户来说可能也会感到不适。 +这种方法使得激活变慢,因为你的组件需要渲染两次。要注意在网络连接较慢的情况下用户的体验。JavaScript 代码的加载时间可能会比初始的 HTML 渲染慢很多,因此在激活之后立即呈现不同的 UI 对用户来说可能也会感到不适。 --- -### 更新 hydrate 根组件 {/*updating-a-hydrated-root-component*/} +### 更新激活根组件 {/*updating-a-hydrated-root-component*/} -在根组件 hydrate 完成之后,你可以调用 [`root.render`](#root-render) 来更新根 React 组件。**与 [`createRoot`](/reference/react-dom/client/createRoot) 不同的是,通常你不需要这样做,因为初始内容已经渲染为 HTML**。 +在根组件激活完成之后,你可以调用 [`root.render`](#root-render) 来更新根 React 组件。**与 [`createRoot`](/reference/react-dom/client/createRoot) 不同的是,通常你不需要这样做,因为初始内容已经渲染为 HTML**。 -如果在 hydrate 之后某个时刻调用了 `root.render`,并且组件树结构与之前渲染的相匹配,那么 React 将 [保留重置 state](/learn/preserving-and-resetting-state)。请注意,你可以在输入框中输入文字,这意味着在此示例中每秒钟重复调用的 `render` 不会破坏已有的组件状态: +如果在激活之后某个时刻调用了 `root.render`,并且组件树结构与之前渲染的相匹配,那么 React 将 [保留重置 state](/learn/preserving-and-resetting-state)。请注意,你可以在输入框中输入文字,这意味着在此示例中每秒钟重复调用的 `render` 不会破坏已有的组件状态: diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index ae19cea8ce..f7e6208872 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -34,7 +34,7 @@ title: "普通组件(例如
)" * `suppressContentEditableWarning`:布尔值。如果为 `true` 将会抑制 React 对同时具有 `child` 和 `contentEditable={true}` 属性的元素发出的警告(这两者通常不能同时使用)。如果你正在构建一个手动管理 `contentEditable` 内容的文本输入库,请使用此选项。 -* `suppressHydrationWarning`:布尔值。如果你使用 [服务器渲染](/reference/react-dom/server),通常会在服务器和客户端渲染不同内容时发出警告。在一些罕见的情况下(比如时间戳),很难或者不可能保证完全匹配。如果你设置 `suppressHydrationWarning` 为 `true`,React 不会在元素属性和内容不匹配时发出警告。它只能在同级工作,并被作为脱围机制。[阅读有关抑制 hydrate 错误的内容](/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors)。 +* `suppressHydrationWarning`:布尔值。如果你使用 [服务器渲染](/reference/react-dom/server),通常会在服务器和客户端渲染不同内容时发出警告。在一些罕见的情况下(比如时间戳),很难或者不可能保证完全匹配。如果你设置 `suppressHydrationWarning` 为 `true`,React 不会在元素属性和内容不匹配时发出警告。它只能在同级工作,并被作为脱围机制。[阅读有关抑制激活错误的内容](/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors)。 * `style`:CSS 样式对象,如 `{ fontWeight:'bold',margin:20 }`。与 DOM [`style`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/style) 属性类似,CSS 属性应该使用像 `camelCase` 这样的驼峰命名法,如应该使用 `fontWeight` 而不是 `font-weight`。你可以将字符串或数字作为值传递,类似 `width: 100`,React 会自动将值附加为 `px`(“像素”),除非它是一个 [无单位的属性](https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57)。我们建议仅在动态样式中使用 `style`,即事先不知道样式值。在其他情况下,使用普通的 CSS 类和 `className` 更有效。[了解有关 `className` 和 `style` 的更多信息](#applying-css-styles)。 diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index 003513f729..e47add11fc 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -46,7 +46,7 @@ React 将会附加到 `domNode` 内部现有的 HTML,并接管有关的 DOM * `domNode`:在服务器中被渲染为根节点的 [DOM 元素](https://developer.mozilla.org/zh-CN/docs/Web/API/Element)。 -* **可选属性** `callback`:一个函数。如果传递了该参数,React 将会在组件 hydrate 后调用它。 +* **可选属性** `callback`:一个函数。如果传递了该参数,React 将会在组件激活后调用它。 #### 返回值 {/*returns*/} @@ -54,7 +54,7 @@ React 将会附加到 `domNode` 内部现有的 HTML,并接管有关的 DOM #### 注意 {/*caveats*/} * `hydrate` 要求渲染的内容与服务器渲染的内容完全相同。尽管 React 可以修复文本内容的差异,但你应该首先将不匹配视为错误并进行修复。 -* 在开发模式下,React 会在 hydration 期间警告不匹配的错误。如果存在不匹配情况,无法保证属性的差异会被修补。在大多数应用程序中不匹配是很少见的,所以验证所有标记的代价将会很高。因此考虑到性能原因,这是很重要的。 +* 在开发模式下,React 会在激活期间警告不匹配的错误。如果存在不匹配情况,无法保证属性的差异会被修补。在大多数应用程序中不匹配是很少见的,所以验证所有标记的代价将会很高。因此考虑到性能原因,这是很重要的。 * 你的应用程序中可能只有一个 `hydrate` 调用。如果你使用了框架,它可能会为你执行此调用。 * 如果你的应用程序是客户端渲染的,并且没有已经渲染的 HTML,则不支持使用 `hydrate()`。请改用 [render()](/reference/react-dom/render)(适用于 React 17 及以下版本)或 [createRoot()](/reference/react-dom/client/createRoot)(适用于 React 18 及以上版本)。 @@ -72,9 +72,9 @@ hydrate(, document.getElementById('root')); 不支持使用 `hydrate()` 渲染仅用于客户端的应用程序(没有服务器渲染的 HTML)。请改用 [`render()`](/reference/react-dom/render)(适用于 React 17 及以下版本)或 [`createRoot()`](/reference/react-dom/client/createRoot)(适用于 React 18 及以上版本)。 -### hydrate 服务器渲染的 HTML {/*hydrating-server-rendered-html*/} +### 激活服务器渲染的 HTML {/*hydrating-server-rendered-html*/} -在 React 中,hydrate 是指将 React “附加(attach)”到在服务器环境中已由 React 渲染的现有 HTML 上。在 hydrate 期间,React 将尝试将事件监听器附加(attach)到现有标记,并在客户端上接管渲染应用程序。 +在 React 中,激活(hydrate)是指将 React “附加(attach)”到在服务器环境中已由 React 渲染的现有 HTML 上。在激活期间,React 将尝试将事件监听器附加(attach)到现有标记,并在客户端上接管渲染应用程序。 在完全使用 React 构建的应用程序中,**通常只会在第一次启动整个应用程序时,hydrate “根”节点**。 @@ -106,15 +106,15 @@ export default function App() { 通常情况下,你不需要再次调用 `hydrate`,也不需要在更多地方调用它。从此时开始,React 将会管理你的应用程序的 DOM。为了更新 UI,你的组件将会 [使用 state](/reference/react/useState)。 -有关 hydrate 的更多信息,请参阅 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)。 +有关激活的更多信息,请参阅 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)。 --- -### 抑制不可避免的 hydrate 不匹配错误 {/*suppressing-unavoidable-hydration-mismatch-errors*/} +### 抑制不可避免的激活内容不匹配错误 {/*suppressing-unavoidable-hydration-mismatch-errors*/} -如果服务器和客户端之间某个元素的属性或文本内容无法避免不同(比如一个时间戳),你可以禁止 hydrate 警告。 +如果服务器和客户端之间某个元素的属性或文本内容无法避免不同(比如一个时间戳),你可以禁止激活警告。 -使用 `suppressHydrationWarning={true}` 禁止 hydrate 警告: +使用 `suppressHydrationWarning={true}` 禁止激活警告: @@ -192,10 +192,10 @@ export default function App() { -这样,初始渲染过程将呈现与服务器相同的内容,并且避免不匹配的情况,但会在 hydrate 后立即同步并进行额外的渲染。 +这样,初始渲染过程将呈现与服务器相同的内容,并且避免不匹配的情况,但会在激活后立即同步并进行额外的渲染。 -这种方法会使 hydrate 变慢,因为你的组件必须渲染两次,因此要注意在网络不好情况下的用户体验。JavaScript 代码的加载可能比初始 HTML 渲染要晚许多,因此在 hydrate 后立即渲染不同的 UI 可能会让用户感到不适。 +这种方法会使激活变慢,因为你的组件必须渲染两次,因此要注意在网络不好情况下的用户体验。JavaScript 代码的加载可能比初始 HTML 渲染要晚许多,因此在激活后立即渲染不同的 UI 可能会让用户感到不适。 diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index c4409ad0f8..668676b7c3 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -76,4 +76,4 @@ app.use('/', (request, response) => { }); ``` -这里的流会将 React 组件初始输出为非交互式 HTML。在客户端上,你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 方法来 hydrate 服务器生成的 HTML 并使其具有交互功能。 +这里的流会将 React 组件初始输出为非交互式 HTML。在客户端上,你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 方法来激活服务器生成的 HTML 并使其具有交互功能。 diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 513a4240c9..a40c0892e3 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -178,7 +178,7 @@ app.use('/', (request, response) => { }); ``` -因为你的服务端正在渲染 ``,所以你还需要在客户端将这个带有 `assetMap` 的组件再渲染一次进行同构,以此避免 hydrate 错误。你可以像下面这样序列化 `assetMap` 之后再传递: +因为你的服务端正在渲染 ``,所以你还需要在客户端将这个带有 `assetMap` 的组件再渲染一次进行同构,以此避免激活错误。你可以像下面这样序列化 `assetMap` 之后再传递: ```js {9-10} // 你需要从你的打包构建工具中获取这个 JSON。 @@ -209,7 +209,7 @@ import App from './App.js'; hydrateRoot(document, ); ``` -这样一来,客户端和服务端都渲染了带有 `assetMap` 属性的 `App`,因此它们是同构的,就不会出现 hydrate 异常错误。 +这样一来,客户端和服务端都渲染了带有 `assetMap` 属性的 `App`,因此它们是同构的,就不会出现激活异常错误。 diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md index 75c78fd083..e2462b5e38 100644 --- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md +++ b/src/content/reference/react-dom/server/renderToStaticNodeStream.md @@ -42,11 +42,11 @@ stream.pipe(response); #### 返回值 {/*returns*/} -输出 HTML 字符串的 [Node.js 只读流](https://nodejs.org/api/stream.html#readable-streams),以此法输出的 HTML 不能被客户端 hydrate。 +输出 HTML 字符串的 [Node.js 只读流](https://nodejs.org/api/stream.html#readable-streams),以此法输出的 HTML 不能被客户端激活。 #### 注意 {/*caveats*/} -* `renderToStaticNodeStream` 的输出不能被 hydrate。 +* `renderToStaticNodeStream` 的输出不能被激活。 * 此方法会等待所有 [Suspense边界](/reference/react/Suspense) 完成后才返回输出。 @@ -76,7 +76,7 @@ app.use('/', (request, response) => { -此方法将会渲染 **无法被 hydrate 的非交互式 HTML**。如果你想将 React 用作简单的静态页面生成器,或者渲染完全静态的内容(如电子邮件),那么这将会很有用。 +此方法将会渲染 **无法被激活的非交互式 HTML**。如果你想将 React 用作简单的静态页面生成器,或者渲染完全静态的内容(如电子邮件),那么这将会很有用。 交互式应用程序应该在服务端使用 [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) 并在客户端结合使用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)。 diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index c48077f83c..1d0d419a1f 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -73,7 +73,7 @@ app.use('/', (request, response) => { }); ``` -这将生成你的 React 组件的初始非交互式 HTML 输出。在客户端上,你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 来将服务器生成的 HTML 进行 hydrate 处理,使其具有交互功能。 +这将生成你的 React 组件的初始非交互式 HTML 输出。在客户端上,你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 来将服务器生成的 HTML 进行激活处理,使其具有交互功能。 diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md index 24f9bbcbc3..9abe84e749 100644 --- a/src/content/reference/react/useActionState.md +++ b/src/content/reference/react/useActionState.md @@ -57,7 +57,7 @@ function StatefulForm({}) { form state 是一个只在表单被提交触发 action 后才会被更新的值。如果该表单没有被提交,该值会保持传入的初始值不变。 -如果配合 Server Action 一起使用,`useActionState` 允许与表单交互的服务器的返回值在 hydration 完成前显示。 +如果配合 Server Action 一起使用,`useActionState` 允许与表单交互的服务器的返回值在激活完成前显示。 [请参阅下方更多示例](#usage)。 diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index c0c5913337..fec265a83b 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -1753,7 +1753,7 @@ function MyComponent() { } ``` -当应用加载时,用户首先会看到初始渲染的输出。然后,当它加载完并进行 hydrate 时,Effect 将会运行并且将 `didMount` 设置为 `true`,从而触发重新渲染。这将切换到仅在客户端的渲染输出。Effect 不在服务器上运行,这就是 `didMount` 在初始服务器渲染期间为 `false` 的原因。 +当应用加载时,用户首先会看到初始渲染的输出。然后,当它加载完并进行激活时,Effect 将会运行并且将 `didMount` 设置为 `true`,从而触发重新渲染。这将切换到仅在客户端的渲染输出。Effect 不在服务器上运行,这就是 `didMount` 在初始服务器渲染期间为 `false` 的原因。 谨慎使用此模式。请记住,网络连接速度较慢的用户将在相当长的时间内(可能是数秒钟)看到初始内容,因此你不希望对组件的外观进行突兀的更改。在许多情况下,你可以通过使用 CSS 条件性地显示不同的内容来避免这种需要。 diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 93747ff5f7..16497efc2b 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -179,7 +179,7 @@ input { margin: 5px; } `useId` 的主要好处是 React 确保它能够与 [服务端渲染](/reference/react-dom/server)一起工作。 在服务器渲染期间,你的组件生成输出 HTML。随后,在客户端,[hydration](/reference/react-dom/client/hydrateRoot) 会将你的事件处理程序附加到生成的 HTML 上。由于 hydration,客户端必须匹配服务器输出的 HTML。 -使用递增计数器很难保证这一点,因为客户端组件被 hydrate 处理后的顺序可能与服务器 HTML 的顺序不匹配。调用 `useId` 可以确保 hydration 正常工作,以及服务器和客户端之间的输出相匹配。 +使用递增计数器很难保证这一点,因为客户端组件被激活处理后的顺序可能与服务器 HTML 的顺序不匹配。调用 `useId` 可以确保激活正常工作,以及服务器和客户端之间的输出相匹配。 在 React 内部,调用组件的“父路径”生成 `useId`。这就是为什么如果客户端和服务器的树相同,不管渲染顺序如何,“父路径”始终都匹配。 diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index f753a028f2..a48dab6a26 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -736,6 +736,6 @@ export default function TooltipContainer({ children, x, y, contentRef }) { - 或者,[将你的组件标记为仅在客户端上渲染](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) 。这告诉 React 在服务器渲染期间将其内容替换为最接近的 [``](/reference/react/Suspense) 处的表示加载中的后备方案(例如,一个加载动画或者光效)。 -- 或者,只有在水合之后,使用 `useLayoutEffect` 渲染组件。保留一个初始化为 `false` 的 `isMounted` 布尔状态,并在 `useEffect` 调用中将其设置为 `true`。然后你的渲染逻辑就会像 `return isMounted ? : ` 这样。在服务端和水合过程中,用户将看到 `FallbackContent`,它不应该调用 `useLayoutEffect`。然后 React 将用 `RealContent` 替换它,`RealContent` 仅在客户端上运行并且可以包含 `useLayoutEffect` 调用。 +- 或者,只有在激活之后,使用 `useLayoutEffect` 渲染组件。保留一个初始化为 `false` 的 `isMounted` 布尔状态,并在 `useEffect` 调用中将其设置为 `true`。然后你的渲染逻辑就会像 `return isMounted ? : ` 这样。在服务端和激活过程中,用户将看到 `FallbackContent`,它不应该调用 `useLayoutEffect`。然后 React 将用 `RealContent` 替换它,`RealContent` 仅在客户端上运行并且可以包含 `useLayoutEffect` 调用。 - 如果你将组件与外部数据存储同步,并且依赖 `useLayouteffect` 的原因不同于测量布局,可以考虑使用 [支持服务端渲染](/reference/react/useSyncExternalStore#adding-support-for-server-rendering) 的 [`useSyncExternalStore`](/reference/react/useSyncExternalStore)。 diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index f29cab2947..466d984a5a 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -45,7 +45,7 @@ function TodosApp() { * `getSnapshot`:一个函数,返回组件需要的 store 中的数据快照。在 store 不变的情况下,重复调用 `getSnapshot` 必须返回同一个值。如果 store 改变,并且返回值也不同了(用 [`Object.is`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 比较),React 就会重新渲染组件。 -* **可选** `getServerSnapshot`:一个函数,返回 store 中数据的初始快照。它只会在服务端渲染时,以及在客户端进行服务端渲染内容的 hydration 时被用到。快照在服务端与客户端之间必须相同,它通常是从服务端序列化并传到客户端的。如果你忽略此参数,在服务端渲染这个组件会抛出一个错误。 +* **可选** `getServerSnapshot`:一个函数,返回 store 中数据的初始快照。它只会在服务端渲染时,以及在客户端进行服务端渲染内容的激活时被用到。快照在服务端与客户端之间必须相同,它通常是从服务端序列化并传到客户端的。如果你忽略此参数,在服务端渲染这个组件会抛出一个错误。 #### 返回值 {/*returns*/}