【译】渲染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。