元素是React應(yīng)用的最小構(gòu)建塊咒循。
一個(gè)元素描述了你想要在屏幕上看到什么：
const element = <h1>Hello, world</h1>;
與瀏覽器DOM元素不同扶踊，React元素是純對(duì)象裙盾，并且創(chuàng)建的代價(jià)很小实胸。React DOM負(fù)責(zé)更新DOM去匹配React元素。
注意：
元素可能與更為熟知的"組件"的概念讓人覺(jué)得困惑番官，我們將會(huì)在下一章節(jié)介紹"組件"庐完。組件是由元素構(gòu)成的，我們推薦在閱讀接下來(lái)的章節(jié)之前先來(lái)閱讀本章節(jié)徘熔。
將一個(gè)元素渲染到DOM中
在你的HTML文件中的某個(gè)位置有一個(gè)<div>
<div id="root"></div>
我們把它稱(chēng)作根DOM節(jié)點(diǎn)假褪，因?yàn)樵谒锩娴娜魏螙|西都將會(huì)被React DOM進(jìn)行管理。
僅僅使用React技術(shù)來(lái)構(gòu)建的應(yīng)用通常有單個(gè)根DOM節(jié)點(diǎn)近顷。如果你正在把React融入進(jìn)一個(gè)已經(jīng)存在的應(yīng)用中生音，如果你愿意的話你可能會(huì)有許多個(gè)單獨(dú)的根DOM節(jié)點(diǎn)。
為了將一個(gè)React元素渲染到一個(gè)根DOM元素窒升，將它們傳入到ReactDOM.render():
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
它將在頁(yè)面上顯示"Hello, world"
更新已經(jīng)被渲染的React元素
React元素是不可以更改的缀遍。一旦你創(chuàng)建了一個(gè)元素，你不可以改變它的子元素或者屬性饱须。一個(gè)元素好比是電影中的一幀：它代表了在某一個(gè)確切的時(shí)間點(diǎn)的UI域醇。
我們現(xiàn)在已知的，唯一的方式去更新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);
它會(huì)每一秒調(diào)用一次ReactDOM.render()方法從一個(gè)setInterval()回調(diào)中锅铅。
注意：
在實(shí)踐中，大多數(shù)React應(yīng)用只調(diào)用ReactDOM.render()方法一次减宣。在下一章節(jié)中盐须，我們將會(huì)學(xué)習(xí)到如何把這些代碼封裝到組件中。
我們推薦你不要跳過(guò)任何章節(jié)漆腌，因?yàn)樗鼈兌际腔ハ嘤新?lián)系的贼邓。
React只會(huì)在需要的時(shí)候更新
React DOM會(huì)把元素還有他的子節(jié)點(diǎn)與之前的那一個(gè)元素進(jìn)行對(duì)比，并且只會(huì)在必要的時(shí)候申請(qǐng)更新DOM到想要的狀態(tài)闷尿。
你可以在瀏覽器的開(kāi)發(fā)者工具中對(duì)上一個(gè)例子進(jìn)行核實(shí)塑径。
盡管我們創(chuàng)建了一個(gè)元素來(lái)描述整個(gè)UI樹(shù)在每一個(gè)瞬間應(yīng)該是什么樣子(Even though we create an element describing the whole UI tree on every tick)，只有內(nèi)容中發(fā)生改變的文本節(jié)點(diǎn)被React DOM進(jìn)行了更新操作填具。
根據(jù)我們的經(jīng)驗(yàn)统舀，思考在某一個(gè)時(shí)刻UI應(yīng)該是什么樣子而不是將它隨著時(shí)間如何去改變?nèi)ハ淮蠖彦e(cuò)誤。(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.)
