-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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
docs(cn): translate content/docs/reference-react-dom.md into Chinese #96
Changes from 1 commit
a2a6a67
d8d1a30
d8ab5c4
417e0df
97b1990
ce6fdc5
1c9948d
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,11 +6,11 @@ category: Reference | |||||||||
permalink: docs/react-dom.html | ||||||||||
--- | ||||||||||
|
||||||||||
如果你使用一个 `<script>` 标签引入React,所有的顶层API都能在 `ReactDOM` 的全局范围内被调用。如果你使用npm和ES6, 你可以用 `import ReactDOM from 'react-dom'`。如果你使用npm和ES5, 你可以用 `var ReactDOM = require('react-dom')`。 | ||||||||||
如果你使用一个 `<script>` 标签引入 React ,所有的顶层 API 都能在全局 `ReactDOM` 上调用。如果你使用 npm 和 ES6 ,你可以用 `import ReactDOM from 'react-dom'` 。如果你使用 npm 和 ES5 ,你可以用 `var ReactDOM = require('react-dom')` 。 | ||||||||||
|
||||||||||
## 概述 {#overview} | ||||||||||
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
|
||||||||||
|
||||||||||
`react-dom` 包提供了可在应用顶层使用的 DOM 特定(DOM-specific)的方法,如果有需要,你可以把这些方法用作到React模型外面的逃生出口。不过一般情况下,你的大部分组件都不需要使用这个包。 | ||||||||||
`react-dom` 包提供了可在应用顶层使用的针对 DOM(DOM-specific)的方法,如果有需要,你可以把这些方法用作到 React 模型外面的逃生出口。不过一般情况下,你的大部分组件都不需要使用这个模块。 | ||||||||||
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
|
||||||||||
|
||||||||||
- [`render()`](#render) | ||||||||||
- [`hydrate()`](#hydrate) | ||||||||||
|
@@ -20,11 +20,11 @@ permalink: docs/react-dom.html | |||||||||
|
||||||||||
### 浏览器支持 {#browser-support} | ||||||||||
|
||||||||||
React 支持所有的现代浏览器,包括 IE9 及以上版本,但是需要为老浏览器比如 IE9 和 IE10 引入[一些polyfills](/docs/javascript-environment-requirements.html)。 | ||||||||||
React 支持所有的现代浏览器,包括 IE9 及以上版本,但是需要为老浏览器比如 IE9 和 IE10 引入[一些 polyfills](/docs/javascript-environment-requirements.html) 。 | ||||||||||
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. 西文和全角标点之间不应该有空格 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
|
||||||||||
|
||||||||||
> 注意: | ||||||||||
> | ||||||||||
>我们不支持那些不兼容 ES5 方法的老浏览器,但如果你的应用包含了 polyfill,例如 [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) 你可能会发现你的应用仍然可以在这些浏览器中正常运行。不过如果你选择这种方法,你便需要孤军奋战了。 | ||||||||||
>我们不支持那些不兼容 ES5 方法的老浏览器,但如果你的应用包含了 polyfill ,例如 [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) 你可能会发现你的应用仍然可以在这些浏览器中正常运行。不过如果你选择这种方法,你便需要孤军奋战了。 | ||||||||||
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. 这里也一样, folyfill 和 , 之间没有空格 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
|
||||||||||
|
||||||||||
* * * | ||||||||||
|
||||||||||
|
@@ -35,21 +35,22 @@ React 支持所有的现代浏览器,包括 IE9 及以上版本,但是需要 | |||||||||
```javascript | ||||||||||
ReactDOM.render(element, container[, callback]) | ||||||||||
``` | ||||||||||
|
||||||||||
在提供的 `container` 里渲染一个 React 元素,返回一个这个组件的[引用](/docs/more-about-refs.html)(或者为[无状态组件](/docs/components-and-props.html#functional-and-class-components)返回 `null`)。 | ||||||||||
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. 原文38 是一个空行,建议保持一致 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
|
||||||||||
|
||||||||||
如果 React 元素之前已经在 `container` 里渲染过,这将会进行一次更新,并且只会在必要时改变 DOM 来体现最新的 React 元素。 | ||||||||||
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
|
||||||||||
|
||||||||||
如果提供了可选的回调函数,回调将在组件被渲染或更新之后执行。 | ||||||||||
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
|
||||||||||
|
||||||||||
> 注意: | ||||||||||
> 注意: | ||||||||||
> | ||||||||||
> `ReactDOM.render()` 会控制你提供的容器节点里的内容。当第一次调用时,容器节点里的所有 DOM 元素都会被清除,后续的调用则会使用 React 的 DOM 差分算法(DOM diffing algorithm)进行高效的更新。 | ||||||||||
> `ReactDOM.render()` 会控制你提供的容器节点里的内容。当第一次调用时,容器节点里的所有 DOM 元素都会被替换,后续的调用则会使用 React 的 DOM 差分算法(DOM diffing algorithm)进行高效的更新。 | ||||||||||
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
|
||||||||||
> | ||||||||||
> `ReactDOM.render()` 不会修改容器节点(只会修改容器的子节点)。你可以在不覆盖已有子节点的情况下添加一个组件到已有的 DOM 节点中去。 | ||||||||||
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
|
||||||||||
> | ||||||||||
> `ReactDOM.render()` 目前会返回一个指向根 `ReactComponent` 实例的引用。但是使用返回值的这种写法来自历史遗留并且应该避免,因为在未来版本的 React 中,组件的渲染在某些情况下会是异步的。如果你真的需要一个指向根 `ReactComponent` 实例的引用,推荐的方法是添加一个 [callback ref](/docs/more-about-refs.html#the-ref-callback-attribute) 到根元素上。 | ||||||||||
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. legacy 在 issue 中看到好像建议翻为 废弃 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. 行数保持一致吧,可以拆成三句 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
|
||||||||||
> | ||||||||||
> 使用 `ReactDOM.render()` 混合服务端渲染的容器已经弃用了,并且会在 React 17 被移除。作为替代,使用 [`hydrate()`](#hydrate)。 | ||||||||||
> 使用 `ReactDOM.render()` 混合服务端渲染的容器已经废弃了,并且会在 React 17 被移除。作为替代,使用 [`hydrate()`](#hydrate)。 | ||||||||||
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
|
||||||||||
|
||||||||||
* * * | ||||||||||
|
||||||||||
|
@@ -65,7 +66,7 @@ React 期望服务端和客户端渲染的内容完全一致。React 可以弥 | |||||||||
|
||||||||||
如果一个单一元素的属性或者文本内容,在服务端和客户端之间不可避免的不同(比如:时间戳),你可以为元素添加 `suppressHydrationWarning={true}` 隐藏警告。这种方式只在一层深度上有效,而且应只作为一个逃生窗口(escape hatch)。除非是文本内容,否则不要滥用,React 不会尝试修补不同,所以在未来的更新以前,仍会保持不一致。 | ||||||||||
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
|
||||||||||
|
||||||||||
如果你刻意的在服务端与客户端渲染不同内容,你可以采用两遍(two-pass)渲染。在客户端渲染不同内容的组件可以读取一个 state 变量,例如 `this.state.isClient`,你可以在 `componentDidMount()` 里将它设置为 `true`。这种方式在初始渲染时会和服务端渲染相同的内容,避免不同。混合之后,另外的操作会同步进行。 注意,因为进行了两次渲染,这种实现会使你的组件变慢,请小心使用。 | ||||||||||
如果你刻意的在服务端与客户端渲染不同内容,你可以采用两遍(two-pass)渲染。在客户端渲染不同内容的组件可以读取一个 state 变量,例如 `this.state.isClient` ,你可以在 `componentDidMount()` 里将它设置为 `true` 。这种方式在初始渲染时会和服务端渲染相同的内容,避免不同。混合之后,另外的操作会同步进行。 注意,因为进行了两次渲染,这种实现会使你的组件变慢,请小心使用。 | ||||||||||
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 代码的加载可能比初始 HTML 渲染晚的多。所以如果你只在客户端渲染不同的内容,其变化可能会有冲突。但是,如果执行顺利,在服务端渲染外壳(shell)也许是有益的,并且只需在客户端显示额外的小组件。要了解如何在避免不匹配标记问题下实现,请参考上一段的解释。 | ||||||||||
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
|
||||||||||
|
||||||||||
|
@@ -76,7 +77,7 @@ React 期望服务端和客户端渲染的内容完全一致。React 可以弥 | |||||||||
```javascript | ||||||||||
ReactDOM.unmountComponentAtNode(container) | ||||||||||
``` | ||||||||||
从 DOM 中移除一个已经挂载的组件,并且清除其事件处理器(event handlers)和 state 。如果指定容器上没有已挂载组件,这个函数什么也不会做。如果组件被移除将会返回 `true`,如果没有组件可被移除将会返回 `false`。 | ||||||||||
从 DOM 中移除一个已经挂载的组件,并且清除其事件处理器(event handlers)和 state 。如果指定容器上没有已挂载组件,这个函数什么也不会做。如果组件被移除将会返回 `true` ,如果没有组件可被移除将会返回 `false` 。 | ||||||||||
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. 多删了一行 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
|
||||||||||
|
||||||||||
* * * | ||||||||||
|
||||||||||
|
@@ -91,7 +92,7 @@ ReactDOM.findDOMNode(component) | |||||||||
``` | ||||||||||
如果组件已经被挂载到 DOM 上,这个方法会返回相应的原生浏览器 DOM 元素。这个方法对于从 DOM 中读取值很有用,例如表单字段的值和执行 DOM 测量(performing DOM measurements)。**大多数情况下,你可以绑定一个 ref 到 DOM 节点上,完全避免使用 findDOMNode。** | ||||||||||
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
|
||||||||||
|
||||||||||
当一个组件渲染的内容是 `null` 或者 `false` 时,`findDOMNode` 返回的是 `null`。当一个组件渲染的是字符串时,`findDOMNode` 返回的包含这个值的文本 DOM 节点。从 React 16 开始,一个组件可能会返回有多个子节点的碎片(fragment),在这个情况下,`findDOMNode` 会返回第一个非空子节点对应的 DOM 节点。 | ||||||||||
当一个组件渲染的内容是 `null` 或者 `false` 时, `findDOMNode` 返回的是 `null` 。当一个组件渲染的是字符串时,`findDOMNode` 返回的包含这个值的文本 DOM 节点。从 React 16 开始,一个组件可能会返回有多个子节点的碎片(fragment),在这个情况下,`findDOMNode` 会返回第一个非空子节点对应的 DOM 节点。 | ||||||||||
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
|
||||||||||
|
||||||||||
> 注意: | ||||||||||
> | ||||||||||
|
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.