Skip to content

Commit d8ab5c4

Browse files
committed
modify
1 parent d8d1a30 commit d8ab5c4

File tree

1 file changed

+11
-10
lines changed

1 file changed

+11
-10
lines changed

content/docs/reference-react-dom.md

+11-10
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ category: Reference
66
permalink: docs/react-dom.html
77
---
88

9-
如果你使用一个 `<script>` 标签引入React,所有的顶层API都能在 `ReactDOM` 的全局范围内被调用。如果你使用npm和ES6, 你可以用 `import ReactDOM from 'react-dom'`。如果你使用npm和ES5, 你可以用 `var ReactDOM = require('react-dom')`
9+
如果你使用一个 `<script>` 标签引入 React ,所有的顶层 API 都能在全局 `ReactDOM` 上调用。如果你使用 npm 和 ES6 ,你可以用 `import ReactDOM from 'react-dom'` 。如果你使用 npm 和 ES5 ,你可以用 `var ReactDOM = require('react-dom')`
1010

1111
## 概述 {#overview}
1212

13-
`react-dom` 包提供了可在应用顶层使用的 DOM 特定(DOM-specific)的方法,如果有需要,你可以把这些方法用作到React模型外面的逃生出口。不过一般情况下,你的大部分组件都不需要使用这个包
13+
`react-dom` 包提供了可在应用顶层使用的针对 DOM(DOM-specific)的方法,如果有需要,你可以把这些方法用作到 React 模型外面的逃生出口。不过一般情况下,你的大部分组件都不需要使用这个模块
1414

1515
- [`render()`](#render)
1616
- [`hydrate()`](#hydrate)
@@ -20,11 +20,11 @@ permalink: docs/react-dom.html
2020

2121
### 浏览器支持 {#browser-support}
2222

23-
React 支持所有的现代浏览器,包括 IE9 及以上版本,但是需要为老浏览器比如 IE9 和 IE10 引入[一些polyfills](/docs/javascript-environment-requirements.html)
23+
React 支持所有的现代浏览器,包括 IE9 及以上版本,但是需要为老浏览器比如 IE9 和 IE10 引入[一些 polyfills](/docs/javascript-environment-requirements.html)
2424

2525
> 注意:
2626
>
27-
>我们不支持那些不兼容 ES5 方法的老浏览器,但如果你的应用包含了 polyfill,例如 [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) 你可能会发现你的应用仍然可以在这些浏览器中正常运行。不过如果你选择这种方法,你便需要孤军奋战了。
27+
>我们不支持那些不兼容 ES5 方法的老浏览器,但如果你的应用包含了 polyfill ,例如 [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) 你可能会发现你的应用仍然可以在这些浏览器中正常运行。不过如果你选择这种方法,你便需要孤军奋战了。
2828
2929
* * *
3030

@@ -35,21 +35,22 @@ React 支持所有的现代浏览器,包括 IE9 及以上版本,但是需要
3535
```javascript
3636
ReactDOM.render(element, container[, callback])
3737
```
38+
3839
在提供的 `container` 里渲染一个 React 元素,返回一个这个组件的[引用](/docs/more-about-refs.html)(或者为[无状态组件](/docs/components-and-props.html#functional-and-class-components)返回 `null`)。
3940

4041
如果 React 元素之前已经在 `container` 里渲染过,这将会进行一次更新,并且只会在必要时改变 DOM 来体现最新的 React 元素。
4142

4243
如果提供了可选的回调函数,回调将在组件被渲染或更新之后执行。
4344

44-
> 注意:
45+
> 注意
4546
>
46-
> `ReactDOM.render()` 会控制你提供的容器节点里的内容。当第一次调用时,容器节点里的所有 DOM 元素都会被清除,后续的调用则会使用 React 的 DOM 差分算法(DOM diffing algorithm)进行高效的更新。
47+
> `ReactDOM.render()` 会控制你提供的容器节点里的内容。当第一次调用时,容器节点里的所有 DOM 元素都会被替换,后续的调用则会使用 React 的 DOM 差分算法(DOM diffing algorithm)进行高效的更新。
4748
>
4849
> `ReactDOM.render()` 不会修改容器节点(只会修改容器的子节点)。你可以在不覆盖已有子节点的情况下添加一个组件到已有的 DOM 节点中去。
4950
>
5051
> `ReactDOM.render()` 目前会返回一个指向根 `ReactComponent` 实例的引用。但是使用返回值的这种写法来自历史遗留并且应该避免,因为在未来版本的 React 中,组件的渲染在某些情况下会是异步的。如果你真的需要一个指向根 `ReactComponent` 实例的引用,推荐的方法是添加一个 [callback ref](/docs/more-about-refs.html#the-ref-callback-attribute) 到根元素上。
5152
>
52-
> 使用 `ReactDOM.render()` 混合服务端渲染的容器已经弃用了,并且会在 React 17 被移除。作为替代,使用 [`hydrate()`](#hydrate)
53+
> 使用 `ReactDOM.render()` 混合服务端渲染的容器已经废弃了,并且会在 React 17 被移除。作为替代,使用 [`hydrate()`](#hydrate)
5354
5455
* * *
5556

@@ -65,7 +66,7 @@ React 期望服务端和客户端渲染的内容完全一致。React 可以弥
6566

6667
如果一个单一元素的属性或者文本内容,在服务端和客户端之间不可避免的不同(比如:时间戳),你可以为元素添加 `suppressHydrationWarning={true}` 隐藏警告。这种方式只在一层深度上有效,而且应只作为一个逃生窗口(escape hatch)。除非是文本内容,否则不要滥用,React 不会尝试修补不同,所以在未来的更新以前,仍会保持不一致。
6768

68-
如果你刻意的在服务端与客户端渲染不同内容,你可以采用两遍(two-pass)渲染。在客户端渲染不同内容的组件可以读取一个 state 变量,例如 `this.state.isClient`,你可以在 `componentDidMount()` 里将它设置为 `true`。这种方式在初始渲染时会和服务端渲染相同的内容,避免不同。混合之后,另外的操作会同步进行。 注意,因为进行了两次渲染,这种实现会使你的组件变慢,请小心使用。
69+
如果你刻意的在服务端与客户端渲染不同内容,你可以采用两遍(two-pass)渲染。在客户端渲染不同内容的组件可以读取一个 state 变量,例如 `this.state.isClient` ,你可以在 `componentDidMount()` 里将它设置为 `true` 。这种方式在初始渲染时会和服务端渲染相同的内容,避免不同。混合之后,另外的操作会同步进行。 注意,因为进行了两次渲染,这种实现会使你的组件变慢,请小心使用。
6970

7071
记得留意弱网络环境下的用户体验,JavaScript 代码的加载可能比初始 HTML 渲染晚的多。所以如果你只在客户端渲染不同的内容,其变化可能会有冲突。但是,如果执行顺利,在服务端渲染外壳(shell)也许是有益的,并且只需在客户端显示额外的小组件。要了解如何在避免不匹配标记问题下实现,请参考上一段的解释。
7172

@@ -76,7 +77,7 @@ React 期望服务端和客户端渲染的内容完全一致。React 可以弥
7677
```javascript
7778
ReactDOM.unmountComponentAtNode(container)
7879
```
79-
从 DOM 中移除一个已经挂载的组件,并且清除其事件处理器(event handlers)和 state 。如果指定容器上没有已挂载组件,这个函数什么也不会做。如果组件被移除将会返回 `true`,如果没有组件可被移除将会返回 `false`
80+
从 DOM 中移除一个已经挂载的组件,并且清除其事件处理器(event handlers)和 state 。如果指定容器上没有已挂载组件,这个函数什么也不会做。如果组件被移除将会返回 `true` ,如果没有组件可被移除将会返回 `false`
8081

8182
* * *
8283

@@ -91,7 +92,7 @@ ReactDOM.findDOMNode(component)
9192
```
9293
如果组件已经被挂载到 DOM 上,这个方法会返回相应的原生浏览器 DOM 元素。这个方法对于从 DOM 中读取值很有用,例如表单字段的值和执行 DOM 测量(performing DOM measurements)。**大多数情况下,你可以绑定一个 ref 到 DOM 节点上,完全避免使用 findDOMNode。**
9394

94-
当一个组件渲染的内容是 `null` 或者 `false` 时,`findDOMNode` 返回的是 `null`。当一个组件渲染的是字符串时,`findDOMNode` 返回的包含这个值的文本 DOM 节点。从 React 16 开始,一个组件可能会返回有多个子节点的碎片(fragment),在这个情况下,`findDOMNode` 会返回第一个非空子节点对应的 DOM 节点。
95+
当一个组件渲染的内容是 `null` 或者 `false` 时, `findDOMNode` 返回的是 `null` 。当一个组件渲染的是字符串时,`findDOMNode` 返回的包含这个值的文本 DOM 节点。从 React 16 开始,一个组件可能会返回有多个子节点的碎片(fragment),在这个情况下,`findDOMNode` 会返回第一个非空子节点对应的 DOM 节点。
9596

9697
> 注意:
9798
>

0 commit comments

Comments
 (0)