docs(cn): translate content/docs/reference-react-dom-client.md into Chinese #900

hexiaokang · 2022-08-24T14:05:08Z

No description provided.

github-actions · 2023-02-21T03:16:54Z

Size Changes

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

This PR introduced no changes to the javascript bundle 🙌

daochouwangu · 2023-02-23T14:09:28Z

content/docs/reference-react-dom-client.md


 ```js
 import * as ReactDOM from 'react-dom/client';
 ```

-If you use ES5 with npm, you can write:
+如果你使用 ES5 和 npm，你可以这样写:


Suggested change

如果你使用 ES5 和 npm，你可以这样写:

如果你使用 ES5 和 npm，你可以这样写：

npm 处的空格都不需要加，我已经更新了 wiki，你可以看一下~@daochouwangu

daochouwangu · 2023-02-23T14:09:45Z

content/docs/reference-react-dom-client.md


-The following methods can be used in client environments:
+下面的方法可以在客户端环境使用:


Suggested change

下面的方法可以在客户端环境使用:

下面的方法可以在客户端环境使用：

daochouwangu · 2023-02-23T14:10:04Z

content/docs/reference-react-dom-client.md


-React supports all modern browsers, although [some polyfills are required](/docs/javascript-environment-requirements.html) for older versions.
+React 支持所有现代浏览器，但是对于老版本浏览器需要引入 [相关polyfills依赖](/docs/javascript-environment-requirements.html)。


Suggested change

React 支持所有现代浏览器，但是对于老版本浏览器需要引入 [相关polyfills依赖](/docs/javascript-environment-requirements.html)。

React 支持所有现代浏览器，但是对于老版本浏览器需要引入[相关 polyfill 依赖](/docs/javascript-environment-requirements.html)。

daochouwangu · 2023-02-23T14:11:05Z

content/docs/reference-react-dom-client.md

 >
-> We do not support older browsers that don't support ES5 methods or microtasks such as Internet Explorer. You may find that your apps do work in older browsers if polyfills such as [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) are included in the page, but you're on your own if you choose to take this path.
+> 我们不支持那些不兼容 ES5 方法或者微任务的旧版浏览器，比如 Internet Explorer，但如果你的应用包含了 polyfills，例如 [es5-shim 和 es5-sham](https://github.com/es-shims/es5-shim) 你可能会发现你的应用仍然可以在这些浏览器中正常运行。但是如果你选择这种方法，你便需要孤军奋战了。


Suggested change

> 我们不支持那些不兼容 ES5 方法或者微任务的旧版浏览器，比如 Internet Explorer，但如果你的应用包含了 polyfills，例如 [es5-shim 和 es5-sham](https://github.com/es-shims/es5-shim) 你可能会发现你的应用仍然可以在这些浏览器中正常运行。但是如果你选择这种方法，你便需要孤军奋战了。

> 我们不支持那些不兼容 ES5 方法或者微任务的旧版浏览器，比如 Internet Explorer，但如果你的应用包含了 polyfill，例如 [es5-shim 和 es5-sham](https://github.com/es-shims/es5-shim) 你可能会发现你的应用仍然可以在这些浏览器中正常运行。但是如果你选择这种方法，你便需要孤军奋战了。

daochouwangu · 2023-02-23T14:11:51Z

content/docs/reference-react-dom-client.md

@@ -45,30 +45,30 @@ React supports all modern browsers, although [some polyfills are required](/docs
 createRoot(container[, options]);
 ```

-Create a React root for the supplied `container` and return the root. The root can be used to render a React element into the DOM with `render`:
+为输入的 `container` 容器创建一个 React 根节点，并且返回根节点。根节点可以用 `render` 方法来渲染一个 React 元素至 DOM 中:


Suggested change

为输入的 `container` 容器创建一个 React 根节点，并且返回根节点。根节点可以用 `render` 方法来渲染一个 React 元素至 DOM 中:

为输入的 `container` 容器创建一个 React 根节点，并且返回根节点。根节点可以用 `render` 方法来渲染一个 React 元素至 DOM 中：

daochouwangu · 2023-02-23T14:18:04Z

content/docs/reference-react-dom-client.md

- `identifierPrefix`: optional prefix React uses for ids generated by `React.useId`. Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix used on the server.
+`createRoot` 接收两个可选项:
+- `onRecoverableError`: 这是一个可选的回调函数，当 React 从渲染错误中恢复时就会调用。
+- `identifierPrefix`: 可选的前缀，主要用于为通过 `React.useId` 钩子生成的id值添加前缀，有效的避免了当一个页面有多个根节点时的冲突，必须与服务器上的前缀相同。


Suggested change

- `identifierPrefix`: 可选的前缀，主要用于为通过 `React.useId` 钩子生成的id值添加前缀，有效的避免了当一个页面有多个根节点时的冲突，必须与服务器上的前缀相同。

- `identifierPrefix`：可选的前缀，主要用于为通过 `React.useId` 生成的 id 值添加前缀，有效的避免了当一个页面有多个根节点时的冲突，必须与服务器上的前缀相同。

daochouwangu · 2023-02-23T14:21:05Z

content/docs/reference-react-dom-client.md

 >
-> `createRoot()` controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when render is called. Later calls use React’s DOM diffing algorithm for efficient updates.
+> `createRoot()` 控制着你传入的容器节点内容，当调用 render 函数时容器内的所有已存 DOM 元素都会被替换掉。之后的调用会通过 React 的 diffing 算法高效更新。


Suggested change

> `createRoot()` 控制着你传入的容器节点内容，当调用 render 函数时容器内的所有已存 DOM 元素都会被替换掉。之后的调用会通过 React 的 diffing 算法高效更新。

> `createRoot()` 控制着你传入的容器节点内容。当调用 render 函数时容器内的所有 DOM 元素都会被替换掉。之后再调用会通过 React 的 diffing 算法高效更新。

daochouwangu · 2023-02-23T14:23:31Z

content/docs/reference-react-dom-client.md

 >
-> Using `createRoot()` to hydrate a server-rendered container is not supported. Use [`hydrateRoot()`](#hydrateroot) instead.
+> 不能用 `createRoot()` 去hydrate(可以理解为创建)一个服务端渲染容器，应该用 [`hydrateRoot()`](#hydrateroot) 替代。


Suggested change

> 不能用 `createRoot()` 去hydrate(可以理解为创建)一个服务端渲染容器，应该用 [`hydrateRoot()`](#hydrateroot) 替代。

> 不能用 `createRoot()` 去 hydrate 一个服务端渲染容器，应该用 [`hydrateRoot()`](#hydrateroot) 替代。

daochouwangu · 2023-02-23T14:30:51Z

content/docs/reference-react-dom-client.md

@@ -83,13 +83,13 @@ root.unmount();
 hydrateRoot(container, element[, options])
 ```

-Same as [`createRoot()`](#createroot), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attempt to attach event listeners to the existing markup.
+与 [`createRoot()`](#createroot) 一样，但是 hydrateRoot 是用来 hydrate 一个HTML内容由 [`ReactDOMServer`](/docs/react-dom-server.html) 渲染的容器，React 会尝试在已有标记上绑定事件监听器。


Suggested change

与 [`createRoot()`](#createroot) 一样，但是 hydrateRoot 是用来 hydrate 一个HTML内容由 [`ReactDOMServer`](/docs/react-dom-server.html) 渲染的容器，React 会尝试在已有标记上绑定事件监听器。

与 [`createRoot()`](#createroot) 一样，但是 hydrateRoot 是用来 hydrate 一个 HTML 内容由 [`ReactDOMServer`](/docs/react-dom-server.html) 渲染的容器，React 会尝试在已有标签上绑定事件监听器。

daochouwangu · 2023-02-23T14:31:51Z

content/docs/reference-react-dom-client.md

 > 
-> React expects that the rendered content is identical between the server and the client. It can patch up differences in text content, but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
+> React 希望服务端与客户端渲染的内容完全一致。React 可以弥补文本内容的差异，但是你需要将不匹配的地方作为 bug 进行修复。在开发者模式下，React 会对 hydration 操作过程中的不匹配进行警告。但并不能保证在不匹配的情况下，修补属性的差异。由于性能的因素，这一点非常重要，因为大多数应用中不匹配的情况很少见，并且验证所有标记的成本非常昂贵。


Suggested change

> React 希望服务端与客户端渲染的内容完全一致。React 可以弥补文本内容的差异，但是你需要将不匹配的地方作为 bug 进行修复。在开发者模式下，React 会对 hydration 操作过程中的不匹配进行警告。但并不能保证在不匹配的情况下，修补属性的差异。由于性能的因素，这一点非常重要，因为大多数应用中不匹配的情况很少见，并且验证所有标记的成本非常昂贵。

> React 希望服务端与客户端渲染的内容完全一致。React 可以弥补文本内容的差异，但是你需要将不匹配的地方作为 bug 进行修复。在开发者模式下，React 会对 hydration 操作过程中的不匹配进行警告。但并不能保证在不匹配的情况下，修补属性的差异。由于性能的因素，这一点非常重要，因为大多数应用中不匹配的情况很少见，并且验证所有标签的成本非常昂贵。

awxiaoxian2020 · 2023-03-20T06:49:30Z

新版文档已经发布，将关闭这个 Pull Request

翻译ReactDOMClient文章

74b4dfa

vercel bot deployed to Preview – zh-hans-reactjs-org August 24, 2022 14:07 View deployment

vercel bot deployed to Preview – zh-hans.reactjs.org August 24, 2022 14:08 View deployment

hexiaokang changed the title ~~翻译ReactDOMClient文章~~ docs(cn): translate content/docs/reference-react-dom-client.md into Chinese Sep 4, 2022

awxiaoxian2020 added the Pending Review 已翻译，待校对阶段 label Feb 14, 2023

Merge branch 'main' into react-dom-client-trans

f66571f

awxiaoxian2020 requested review from awxiaoxian2020 and daochouwangu February 21, 2023 03:15

vercel bot deployed to Preview – zh-hans-reactjs-org February 21, 2023 03:15 View deployment

vercel bot had a problem deploying to Preview – zh-hans.reactjs.org February 21, 2023 03:15 Failure

daochouwangu requested changes Feb 23, 2023

View reviewed changes

awxiaoxian2020 added Pending Modify 已校对，待修改阶段 and removed Pending Review 已翻译，待校对阶段 labels Feb 23, 2023

awxiaoxian2020 closed this Mar 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(cn): translate content/docs/reference-react-dom-client.md into Chinese #900

docs(cn): translate content/docs/reference-react-dom-client.md into Chinese #900

hexiaokang commented Aug 24, 2022

github-actions bot commented Feb 21, 2023

📦 Next.js Bundle Analysis

daochouwangu Feb 23, 2023 •

edited

Loading

awxiaoxian2020 Feb 23, 2023

daochouwangu Feb 23, 2023

daochouwangu Feb 23, 2023

daochouwangu Feb 23, 2023

daochouwangu Feb 23, 2023 •

edited

Loading

daochouwangu Feb 23, 2023

daochouwangu Feb 23, 2023

daochouwangu Feb 23, 2023

daochouwangu Feb 23, 2023

daochouwangu Feb 23, 2023

daochouwangu Feb 23, 2023

awxiaoxian2020 commented Mar 20, 2023

	如果你使用 ES5 和 npm，你可以这样写:
	如果你使用 ES5 和 npm，你可以这样写：


		The following methods can be used in client environments:
		下面的方法可以在客户端环境使用:

	下面的方法可以在客户端环境使用:
	下面的方法可以在客户端环境使用：


		React supports all modern browsers, although [some polyfills are required](/docs/javascript-environment-requirements.html) for older versions.
		React 支持所有现代浏览器，但是对于老版本浏览器需要引入 [相关polyfills依赖](/docs/javascript-environment-requirements.html)。

	React 支持所有现代浏览器，但是对于老版本浏览器需要引入 [相关polyfills依赖](/docs/javascript-environment-requirements.html)。
	React 支持所有现代浏览器，但是对于老版本浏览器需要引入[相关 polyfill 依赖](/docs/javascript-environment-requirements.html)。

	> 我们不支持那些不兼容 ES5 方法或者微任务的旧版浏览器，比如 Internet Explorer，但如果你的应用包含了 polyfills，例如 [es5-shim 和 es5-sham](https://github.com/es-shims/es5-shim) 你可能会发现你的应用仍然可以在这些浏览器中正常运行。但是如果你选择这种方法，你便需要孤军奋战了。
	> 我们不支持那些不兼容 ES5 方法或者微任务的旧版浏览器，比如 Internet Explorer，但如果你的应用包含了 polyfill，例如 [es5-shim 和 es5-sham](https://github.com/es-shims/es5-shim) 你可能会发现你的应用仍然可以在这些浏览器中正常运行。但是如果你选择这种方法，你便需要孤军奋战了。

	为输入的 `container` 容器创建一个 React 根节点，并且返回根节点。根节点可以用 `render` 方法来渲染一个 React 元素至 DOM 中:
	为输入的 `container` 容器创建一个 React 根节点，并且返回根节点。根节点可以用 `render` 方法来渲染一个 React 元素至 DOM 中：

	- `identifierPrefix`: 可选的前缀，主要用于为通过 `React.useId` 钩子生成的id值添加前缀，有效的避免了当一个页面有多个根节点时的冲突，必须与服务器上的前缀相同。
	- `identifierPrefix`：可选的前缀，主要用于为通过 `React.useId` 生成的 id 值添加前缀，有效的避免了当一个页面有多个根节点时的冲突，必须与服务器上的前缀相同。

	> `createRoot()` 控制着你传入的容器节点内容，当调用 render 函数时容器内的所有已存 DOM 元素都会被替换掉。之后的调用会通过 React 的 diffing 算法高效更新。
	> `createRoot()` 控制着你传入的容器节点内容。当调用 render 函数时容器内的所有 DOM 元素都会被替换掉。之后再调用会通过 React 的 diffing 算法高效更新。

	> 不能用 `createRoot()` 去hydrate(可以理解为创建)一个服务端渲染容器，应该用 [`hydrateRoot()`](#hydrateroot) 替代。
	> 不能用 `createRoot()` 去 hydrate 一个服务端渲染容器，应该用 [`hydrateRoot()`](#hydrateroot) 替代。

	与 [`createRoot()`](#createroot) 一样，但是 hydrateRoot 是用来 hydrate 一个HTML内容由 [`ReactDOMServer`](/docs/react-dom-server.html) 渲染的容器，React 会尝试在已有标记上绑定事件监听器。
	与 [`createRoot()`](#createroot) 一样，但是 hydrateRoot 是用来 hydrate 一个 HTML 内容由 [`ReactDOMServer`](/docs/react-dom-server.html) 渲染的容器，React 会尝试在已有标签上绑定事件监听器。

docs(cn): translate content/docs/reference-react-dom-client.md into Chinese #900

docs(cn): translate content/docs/reference-react-dom-client.md into Chinese #900

Conversation

hexiaokang commented Aug 24, 2022

github-actions bot commented Feb 21, 2023

Size Changes

📦 Next.js Bundle Analysis

daochouwangu Feb 23, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

daochouwangu Feb 23, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

awxiaoxian2020 commented Mar 20, 2023

daochouwangu Feb 23, 2023 •

edited

Loading

daochouwangu Feb 23, 2023 •

edited

Loading