Rendering Elements - 渲染元素
元素是React應用的最小構建塊
一個元素描述了你想要在螢幕上看到的內容：

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

不同於瀏覽器的DOM元素，React元素是普通物件，而且易於建立。React DOM很小心將React元素更新為匹配的DOM物件。
注意：
人們可能將元素與一個廣為人知的概念"元件"混淆。在下一節我們將介紹元件。元素是元件的組成部分，在跳躍著閱讀時，我們鼓勵你閱讀本節。


Rendering an Element into the DOM - 渲染一個元素為DOM
在你的HTML檔案某處，有一個 '<div>'：

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

我們稱這個為一個 'root' DOM節點，因為在它內部的任何內容，都將會被 'React DOM' 來管理。
只通過React構建的應用，經常有一個單個的根DOM節點。如果你正在將React和一個已經存在的應用相融合，你可以設定多個孤立的根DOM節點。
為了渲染一個React元素到一個根DOM節點，將2者都傳遞給 'ReactDOM.rend()'：

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

在頁面上顯示 'Hello, world'.

Updating the Rendered Element - 更新渲染過的元素
React元素時不可改變的。一旦你建立一個元素，你不能改變它的子或者屬性。一個元素就像電影中單獨的一幀：代表一個時間點的UI。
以目前我們學到的知識，更新UI的唯一方式是建立一個新的元素，並且傳遞給 'ReactDOM.render()'。
思考時鐘的例子：

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

利用 setInterval() 的回撥函式，每秒呼叫 'ReactDOM.rend()' 一次。
注意：
實際上，大多數React應用僅僅呼叫 'ReactDOM.rend()' 一次。在下個章節我們將學習如何將這樣的程式碼封裝到有狀態的元件中。
我們推薦你不要跳過這些主題，因為它們相互關聯。

React Only Updates What's Necessary - React僅執行必需的更新
React DOM 將元素和它的子與之前的元素和子進行比較，僅更新必需更新的地方，來讓DOM達到它期望的狀態。
你可以通過使用瀏覽器工具檢查最後一個例子來核實。
這裡是文件裡的firebug動態截圖。
即使在每秒，我們建立了一個元素，來描述整個UI樹，也僅僅只有內部的文字節點通過React DOM被更新。
以我們的經驗，思考任何給定時刻UI應該看起來像什麼，而不是隨著時間它是如何改變的，消除了一整型別的bug。(這就是React真正的內在)