-
Notifications
You must be signed in to change notification settings - Fork 1.1k
docs(cn): translate content/docs/reference-react-dom-client.md into Chinese #900
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -6,34 +6,34 @@ category: Reference | |||||
| permalink: docs/react-dom-client.html | ||||||
| --- | ||||||
|
|
||||||
| The `react-dom/client` package provides client-specific methods used for initializing an app on the client. Most of your components should not need to use this module. | ||||||
| `react-dom/client` 这个包提供了专门用于初始化一个客户端应用的特有方法,你的大部分组件可能不需要这个模块。 | ||||||
|
|
||||||
| ```js | ||||||
| import * as ReactDOM from 'react-dom/client'; | ||||||
| ``` | ||||||
|
|
||||||
| If you use ES5 with npm, you can write: | ||||||
| 如果你使用 ES5 和 npm,你可以这样写: | ||||||
|
|
||||||
| ```js | ||||||
| var ReactDOM = require('react-dom/client'); | ||||||
| ``` | ||||||
|
|
||||||
| ## Overview {#overview} | ||||||
| ## 概览 {#overview} | ||||||
|
|
||||||
| The following methods can be used in client environments: | ||||||
| 下面的方法可以在客户端环境使用: | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| - [`createRoot()`](#createroot) | ||||||
| - [`hydrateRoot()`](#hydrateroot) | ||||||
|
|
||||||
| ### Browser Support {#browser-support} | ||||||
| ### 浏览器支持 {#browser-support} | ||||||
|
|
||||||
| 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)。 | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| > Note | ||||||
| > 注意: | ||||||
| > | ||||||
| > 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) 你可能会发现你的应用仍然可以在这些浏览器中正常运行。但是如果你选择这种方法,你便需要孤军奋战了。 | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| ## Reference {#reference} | ||||||
| ## 参考 {#reference} | ||||||
|
|
||||||
| ### `createRoot()` {#createroot} | ||||||
|
|
||||||
|
|
@@ -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 中: | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| ```javascript | ||||||
| const root = createRoot(container); | ||||||
| root.render(element); | ||||||
| ``` | ||||||
|
|
||||||
| `createRoot` accepts two options: | ||||||
| - `onRecoverableError`: optional callback called when React automatically recovers from errors. | ||||||
| - `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` 接收两个可选项: | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| - `onRecoverableError`: 这是一个可选的回调函数,当 React 从渲染错误中恢复时就会调用。 | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| - `identifierPrefix`: 可选的前缀,主要用于为通过 `React.useId` 钩子生成的id值添加前缀,有效的避免了当一个页面有多个根节点时的冲突,必须与服务器上的前缀相同。 | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| The root can also be unmounted with `unmount`: | ||||||
| 根节点在调用 `unmount` 时也会被卸载: | ||||||
|
|
||||||
| ```javascript | ||||||
| root.unmount(); | ||||||
| ``` | ||||||
|
|
||||||
| > Note: | ||||||
| > 注意: | ||||||
| > | ||||||
| > `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 算法高效更新。 | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
| > | ||||||
| > `createRoot()` does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children. | ||||||
| > `createRoot()` 不修改容器节点(只调整容器内的子节点),它可以插入一个组件至已存的 DOM 节点中,而不用覆盖已存子节点。 | ||||||
| > | ||||||
| > Using `createRoot()` to hydrate a server-rendered container is not supported. Use [`hydrateRoot()`](#hydrateroot) instead. | ||||||
| > 不能用 `createRoot()` 去hydrate(可以理解为创建)一个服务端渲染容器,应该用 [`hydrateRoot()`](#hydrateroot) 替代。 | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| * * * | ||||||
|
|
||||||
|
|
@@ -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 会尝试在已有标记上绑定事件监听器。 | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| `hydrateRoot` accepts two options: | ||||||
| - `onRecoverableError`: optional callback called when React automatically recovers from errors. | ||||||
| - `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. | ||||||
| `hydrateRoot` 接收两个可选项: | ||||||
| - `onRecoverableError`: 这是一个可选的回调函数,当 React 从渲染错误中恢复时就会调用。 | ||||||
| - `identifierPrefix`: 可选的前缀,主要用于为 `React.useId` 钩子生成的id添加前缀,有效的避免了当一个页面有多个根节点时的冲突,必须与服务器上的前缀相同。 | ||||||
|
|
||||||
|
|
||||||
| > Note | ||||||
| > 注意 | ||||||
| > | ||||||
| > 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 操作过程中的不匹配进行警告。但并不能保证在不匹配的情况下,修补属性的差异。由于性能的因素,这一点非常重要,因为大多数应用中不匹配的情况很少见,并且验证所有标记的成本非常昂贵。 | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
npm 处的空格都不需要加,我已经更新了 wiki,你可以看一下~@daochouwangu
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
好的👌