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