【译】渲染Elements

下面是react官方文档的个人翻译，如有翻译错误，请多多指出
原文地址：https://facebook.github.io/re...
特别感谢Hevaen，同时也向豪大React群所有成员表示感谢，从你们身上我学到很多。
注： Elements 不做翻译

Elements are the smallest building blocks of React apps.

Elements 是React apps 中最小的构建部件。

An element describes what you want to see on the screen:

一个element描述你所希望呈现的样子：

const element = <h1>Hello, world</h1>

Unlike browser DOM elements, React elements are plain objects, and are cheap to create.

不同于浏览器的dom elements, react elements 只是一个对象并且相对于创建浏览器dom来说，创建react elements是非常廉价的。

React DOM takes care of updating the DOM to match the React elements.

React DOM 只需要更新dom到对应的React elements 上。

Note:

One might confuse elements with a more widely known concept of "components". We will introduce components in the next section. Elements are what components are "made of", and we encourage you to read this section before jumping ahead.

注意：
一个令人困惑的地方，elements 跟更广为人知的“components" 让人混淆。我们将会在下一节介绍components。 Elements 是由 components 组成的。我们鼓励你先跳过这一章。

Rendering an Element into the DOM

在DOM里渲染element

Let's say there is a <div> somewhere in your HTML file:

让我们看一下在下面有 在你html文件中无处不在的div标签

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

We call this a "root" DOM node because everything inside it will be managed by React DOM.

我们会把这dom元素成为root元素因为React的所有东西都会放在这个元素里面。

Applications built with just React usually have a single root DOM node.
通常只用react来写的应用只有一个root 的dom节点

If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.

如果你打算把react整合到你现在的App里，你可能尽可能的分离多个root节点。

To render a React element into a root DOM node, pass both to ReactDOM.render():

通过ReactDOM.render() 方法，我们能吧react渲染到我们根节点上。

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Try it on CodePen.

It displays "Hello World" on the page.

这个页面将会显示"Hello World"。

Updating the Rendered Element

更新被渲染的element

React elements are immutable.
react elements 是不可变的。

Once you create an element, you can't change its children or attributes.

当你创建一个element的时候，你不能改变它们的子元素或者属性

An element is like a single frame in a movie: it represents the UI at a certain point in time.

一个element就像是一个单独的帧在电影里： 这意味着UI在时间上的某一点。

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的方式是创建一个新的element并且传进给ReactDOM.render().

Consider this ticking clock example:

思考一下下面的时钟例子：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

打开试试

It calls ReactDOM.render() every second from a setInterval() callback.

上面的例子显示从每一秒 setInterval()的回调函数中调用ReactDOM.render()

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.We recommend that you don't skip topics because they build on each other.

在实践中，大部分的React 应用只会调用一次ReactDOM.render()。在下一张，我们将会学习如何把代码封装到 stateful components中
我们希望你别跳过提示因为他们被实践在许多地方

React Only Updates What's Necessary

React只更新需要的部分

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 会把element 当前的值，包括他的children ,与之前的值进行比较，并且只会进行必要的更新。

You can verify by inspecting the last example with the browser tools:

你能通过使用浏览器工具检查一下我们最后的那个例子

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.

尽管我们在每一秒通过创建一个element来描述整个UI树，但只有那些内容被改变了的节点才会被React DOM 所更新

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。