元素是構(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í)間改變的之一部分。具體例子可參考。