# 渲染元素
元素是 React apps 中最小化的構建塊。
一個元素描述了你希望在屏幕上看到的東西：
~~~
const element = <h1>Hello, world</h1>;
~~~
和瀏覽器的 DOM 元素不同， React 元素是扁平對象，非常容易創建。React DOM 會負責更新 DOM 來匹配 React 元素。
> 注意：
有人可能會混淆元素和廣泛認知的概念“組件”。我們將在下一節引入組件。元素是構成組件的部分，我們鼓勵你在繼續之前閱讀這個章節。
## 渲染一個元素到 DOM
假設在你的 HTML 文件中有一個 `<div>` ：
~~~
<div id="root"></div>
~~~
我們稱這個是一個 根 DOM 節點，因為其中的任何內容都會被 React DOM 管理。
只使用 React 構建的應用通常只有一個單獨的根 DOM 節點。如果你是集成 React 到一個已有的 app，可能有許多孤立的根 DOM 節點。
要渲染一個 React 元素到一個 根 DOM 節點，傳遞它們到 ReactDOM.render() 方法中：
~~~
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
~~~
它會在頁面上顯示 "Hello World" 。可以在[ CodePen 中](http://codepen.io/gaearon/pen/rrpgNB?editors=1010)打開看看。
## 更新一個渲染的 React 元素
React 元素是[不可變的](https://en.wikipedia.org/wiki/Immutable_object)。一旦你創建了一個元素，就不能再修改它的子元素或者屬性。一個元素就像一個單獨的電影中的幀：它表示在某個時間點的 UI 。
我們迄今的知識，更新 UI 唯一的方式是創建一個新的元素，并傳遞它到 ReactDOM.render() 中。
思考這個時鐘的例子：
~~~
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);
~~~
或者在 CodePen 中[打開它](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)。
它每秒都會從一個 setInterval() 的回調中調用 ReactDOM.render()。
> 注意：
在實際中，多數 React apps 只調用 ReactDOM.render() 一次。下一節我們將了解折衷代碼如何封裝到有狀態的組件中。我們建議不要跳過話題，因為它們基于彼此。
## React 只更新需要更新的
ReactDOM 把元素和它的子元素跟之前的進行對比，只應用必須的 DOM 更新到 DOM 想要的狀態。
你可以通過使用瀏覽器工具檢查[最后的例子](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)來驗證：
即使我們創建了一個元素在每個 tick 描述整個 UI 樹，但是只有文本節點的內容被通過 ReactDOM 進行了更新修改。
在我們的經驗中，思考 UI 在某個特定時刻應該是什么外觀，而不是思考如何去修改它會消除一整個類型的 bugs 。
