Skip to content
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: add Rendering Elements translations #40

Merged
merged 4 commits into from
Feb 16, 2019
Merged
Changes from 1 commit
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
50 changes: 25 additions & 25 deletions content/docs/rendering-elements.md
Original file line number Diff line number Diff line change
@@ -1,75 +1,75 @@
---
id: rendering-elements
title: Rendering Elements
title: 元素渲染
permalink: docs/rendering-elements.html
redirect_from:
- "docs/displaying-data.html"
prev: introducing-jsx.html
next: components-and-props.html
---

Elements are the smallest building blocks of React apps.
元素是 React 应用的最小组成单位。
robertying marked this conversation as resolved.
Show resolved Hide resolved

An element describes what you want to see on the screen:
元素描述了你在屏幕上想看到的内容。

```js
const element = <h1>Hello, world</h1>;
```

Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
与浏览器的 DOM 元素不同,React 元素是创建开销极小的原生对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
robertying marked this conversation as resolved.
Show resolved Hide resolved

>**Note:**
>**注意:**
>
>One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead.
>你可能会将元素与另一个被熟知的概念——“组件”混淆起来。我们会在[下一个章节](/docs/components-and-props.html)介绍组件。组件是由元素构成的。我们希望你先阅读本章节,而不要急于翻看其他章节。
robertying marked this conversation as resolved.
Show resolved Hide resolved

## Rendering an Element into the DOM
## 将元素渲染进 DOM
robertying marked this conversation as resolved.
Show resolved Hide resolved

Let's say there is a `<div>` somewhere in your HTML file:
假设你的 HTML 文件某处有一个 `<div>`

```html
<div id="root"></div>
```

We call this a "root" DOM node because everything inside it will be managed by React DOM.
我们将其称为“根” DOM 节点,因为该节点内的所有内容都将由 React DOM 管理。

Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
仅使用 React 构建的应用通常只有单一的根 DOM 节点。如果你在将 React 集成进一个现有应用,那么你可以在应用中包含任意多的独立根 DOM 节点。
robertying marked this conversation as resolved.
Show resolved Hide resolved

To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
React 元素和一个根 DOM 节点一起传入 `ReactDOM.render()` 来将该元素渲染进 DOM:
robertying marked this conversation as resolved.
Show resolved Hide resolved

`embed:rendering-elements/render-an-element.js`

[](codepen://rendering-elements/render-an-element)

It displays "Hello, world" on the page.
页面上会出现 "Hello, world"
robertying marked this conversation as resolved.
Show resolved Hide resolved

## Updating the Rendered Element
## 更新已渲染的元素

React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.
React 元素是[不可变对象](https://zh.wikipedia.org/wiki/%E4%B8%8D%E5%8F%AF%E8%AE%8A%E7%89%A9%E4%BB%B6)。一旦被创建,你就无法更改它的子元素或者属性。一个元素就像电影的一帧:它代表了 UI 在特定时刻的状态。
robertying marked this conversation as resolved.
Show resolved Hide resolved

With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`.
根据我们已有的知识,更新 UI 唯一的方式是创建一个全新的元素,并将其传入 `ReactDOM.render()`

Consider this ticking clock example:
考虑一个计时器的例子:

`embed:rendering-elements/update-rendered-element.js`

[](codepen://rendering-elements/update-rendered-element)

It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
每一秒,它会通过 [`setInterval()`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setInterval) 回调函数调用 `ReactDOM.render()`。
robertying marked this conversation as resolved.
Show resolved Hide resolved

>**Note:**
>**注意:**
>
>In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html).
>在实践中,大多数 React 应用只会调用一次 `ReactDOM.render()`。在下一个章节,我们将学习如何通过[有状态组件](/docs/state-and-lifecycle.html)实现这样的代码。
robertying marked this conversation as resolved.
Show resolved Hide resolved
>
>We recommend that you don't skip topics because they build on each other.
>我们建议你不要跳跃着阅读,因为每个话题都是紧密联系的。

## React Only Updates What's Necessary
## React 的按需更新
robertying marked this conversation as resolved.
Show resolved Hide resolved

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
React DOM 会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使 DOM 达到预期的状态。

You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools:
你可以使用浏览器的检查元素工具查看[上一个例子](codepen://rendering-elements/update-rendered-element)来确认这一点。

![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif)

Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM.
尽管每一秒我们都会新建一个描述全部 UI 树的元素,React DOM 只会更新实际改变了的内容,也就是例子中的文本节点。
robertying marked this conversation as resolved.
Show resolved Hide resolved

In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.
根据我们的经验,考虑 UI 在任意给定时刻的状态而不是随时间变化的过程能够消灭一整类的 bug。
robertying marked this conversation as resolved.
Show resolved Hide resolved