渲染元素
元素是 React 應(yīng)用中最小的構(gòu)建單元炼七。
一個(gè)元素描述你想在屏幕上看到的東西。
const element = <h1>Hello,world</h1>;
不同于 DOM 元素布持，React 元素是普通的對(duì)象豌拙，并且創(chuàng)建起來(lái)很“便宜”。React DOM 負(fù)責(zé)更新DOM 以匹配 React 元素题暖。
注意：
有人可能會(huì)混淆元素和廣為人知的“組件”的概念按傅。我們將會(huì)在下一章節(jié)介紹組件。組件是由元素構(gòu)成的胧卤，在下一章之前唯绍，我們鼓勵(lì)你先閱讀這一章節(jié)。
將元素渲染到 DOM
假設(shè)在你的 HTML 文件某處有個(gè)div標(biāo)簽枝誊。
<div id="root"></div>
我們稱這是一個(gè)“根” DOM 節(jié)點(diǎn)况芒，因?yàn)?React DOM 會(huì)管理它里面的一切。
React 構(gòu)建的應(yīng)用通常只有一個(gè)根 DOM 節(jié)點(diǎn)叶撒。如果你整合 React 到一個(gè)現(xiàn)有的應(yīng)用中绝骚，你可以有隨意多個(gè)獨(dú)立的根 DOM 節(jié)點(diǎn)。
要渲染一個(gè) React 元素到一個(gè)根 DOM 節(jié)點(diǎn)祠够，通過把它們傳遞給ReactDOM.render()：
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
在CodePen試試压汪。
它會(huì)在頁(yè)面上顯示“Hello World”。
更新渲染的元素
React 元素是不可變的古瓤。一旦你創(chuàng)建一個(gè)元素止剖，你不能改變它的子元素或?qū)傩浴Ｒ粋€(gè)元素就像電影中單獨(dú)的一幀：它表示在某個(gè)時(shí)間點(diǎn)上的 UI落君。
到目前我們所知的穿香，更新 UI 的唯一方法是創(chuàng)建一個(gè)新的元素，然后把它傳遞給ReactDOM.render()叽奥。
考慮下面這個(gè)時(shí)鐘的例子：
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上試試扔水。
它從setInterval()回調(diào)函數(shù)中，每隔一秒調(diào)用一次ReactDOM.render()朝氓。
注意：
在實(shí)踐中魔市，大多數(shù) React 應(yīng)用僅調(diào)用一次
ReactDOM.render()主届。在接下來(lái)的部分我們將會(huì)學(xué)習(xí)怎樣將這樣的代碼封裝到狀態(tài)組件中。我們推薦你不要跳過這些話題待德，因?yàn)樗鼈冎g彼此依賴君丁。
React 僅按需更新
React DOM 把元素及其子元素和之前的做比較，然后僅按需更新 DOM将宪，使DOM 達(dá)到所期望的狀態(tài)绘闷。
你可以通過使用瀏覽器工具檢查上一個(gè)例子來(lái)驗(yàn)證。
即使我們?cè)诿恳幻雱?chuàng)建一個(gè)元素描述整個(gè) UI 樹较坛，只有內(nèi)容發(fā)生變化的文本節(jié)點(diǎn)被 React DOM 更新印蔗。
根據(jù)我們的經(jīng)驗(yàn)，我們應(yīng)該考慮UI在任何一個(gè)時(shí)間點(diǎn)如何展現(xiàn)丑勤，而不是如何消除在這個(gè)變化過程的一系列的bug华嘹。
下一步
組件和Props
