元素是構(gòu)成React應(yīng)用的最小單位羔飞。
元素是用來描述你在屏幕上看到的內(nèi)容吧兔，可以近似的理解為就是html的標(biāo)簽竟闪。
React元素與瀏覽器的DOM元素是不同的搂擦，React元素可以認(rèn)為就是普通的JavaScript對象涤伐。ReactDOM對React元素進(jìn)行渲染欣舵，確保瀏覽器DOM的數(shù)據(jù)內(nèi)容與React元素保持一致葱轩。
元素渲染到DOM中
React進(jìn)行元素渲染的時(shí)候屠阻，會首先選擇一個(gè)<div>標(biāo)簽，所有渲染的內(nèi)容都讓在這個(gè)<div>標(biāo)簽內(nèi)部策菜。這些渲染的內(nèi)容是由React DOM來管理的晶疼。所以這個(gè)<div>標(biāo)簽我們稱之為根DOM。
對React元素進(jìn)行渲染又憨，并把渲染結(jié)果放入根DOM中翠霍，如果需要完成這個(gè)工作，需要把需要渲染的元素傳遞給ReactDOM.render()方法蠢莺。
如在一個(gè)html頁面中有如下標(biāo)簽
<div id="root"> </div>
則對元素渲染是寒匙，需要如下:
const element = <h1>hello world!</h1>
ReactDOM.render(
element, document.getElementById('root')
);
那么在html頁面中就會出現(xiàn)hello world!的h1標(biāo)題文本。
更新渲染元素
React元素是不可變的躏将，一旦創(chuàng)建锄弱，其內(nèi)容和屬性是不能被改變的。如同一個(gè)動畫中的一幀祸憋，其內(nèi)容和屬性是代表的在某個(gè)時(shí)間點(diǎn)的畫面会宪，所以是不可變的。
React只會更新必要的部分
如上文所說蚯窥，React元素是不可變的掸鹅，但是每次調(diào)用渲染函數(shù)的時(shí)候，及時(shí)是不同的元素拦赠，ReactDOM都會比較元素內(nèi)容前后的不同巍沙。如果需要更新，ReactDOM只會更新改變了的部分矛紫。
也就是即使每秒去調(diào)用一個(gè)函數(shù)赎瞎，函數(shù)中創(chuàng)建了一個(gè)React元素牌里，元素的內(nèi)容分兩部分颊咬，一部分是固定的务甥，一部分是隨時(shí)間改變的，那么ReactDOM也只是渲染隨時(shí)間改變的之一部分喳篇。具體例子可參考敞临。
