Skip to content
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions content/docs/reference-react-dom-client.md
Original file line number Diff line number Diff line change
Expand Up @@ -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,你可以这样写:
Copy link
Collaborator

@daochouwangu daochouwangu Feb 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
如果你使用 ES5 和 npm,你可以这样写:
如果你使用 ES5 和 npm,你可以这样写

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

好的👌


```js
var ReactDOM = require('react-dom/client');
```

## Overview {#overview}
## 概览 {#overview}

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

Choose a reason for hiding this comment

The 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)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


> 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) 你可能会发现你的应用仍然可以在这些浏览器中正常运行。但是如果你选择这种方法,你便需要孤军奋战了。
Copy link
Collaborator

@daochouwangu daochouwangu Feb 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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) 你可能会发现你的应用仍然可以在这些浏览器中正常运行。但是如果你选择这种方法,你便需要孤军奋战了。


## Reference {#reference}
## 参考 {#reference}

### `createRoot()` {#createroot}

Expand All @@ -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 :
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


```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` 接收两个可选项:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`createRoot` 接收两个可选项:
`createRoot` 接收两个可选项

- `onRecoverableError`: 这是一个可选的回调函数,当 React 从渲染错误中恢复时就会调用。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- `onRecoverableError`: 这是一个可选的回调函数,当 React 从渲染错误中恢复时就会调用。
- `onRecoverableError`这是一个可选的回调函数,当 React 从渲染错误中恢复时就会调用。

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


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 算法高效更新。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

>
> `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) 替代。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


* * *

Expand All @@ -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 会尝试在已有标记上绑定事件监听器。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 会尝试在已有标签上绑定事件监听器


`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 操作过程中的不匹配进行警告。但并不能保证在不匹配的情况下,修补属性的差异。由于性能的因素,这一点非常重要,因为大多数应用中不匹配的情况很少见,并且验证所有标记的成本非常昂贵。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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