元素是構(gòu)成React應(yīng)用的最小單位，用來(lái)描述我們?cè)谄聊簧峡吹降膬?nèi)容：

const element = <h1>hello</h1>

與瀏覽器的DOM元素不同，React當(dāng)中的元素是普通的對(duì)象，React DOM可以確保瀏覽器DOM的數(shù)據(jù)內(nèi)容與React元素保持一致。

將元素渲染到DOM中

我們?cè)谝粋€(gè)HTML頁(yè)面中添加一個(gè)id="root"的根元素：
<div id="root"></div>在這個(gè)根元素中的所有內(nèi)容都將由React DOM來(lái)管理，我們將其稱(chēng)為“根”DOM節(jié)點(diǎn)。我們?cè)谟肦eact開(kāi)發(fā)應(yīng)用時(shí)一般只會(huì)定義一個(gè)根節(jié)點(diǎn)。如果我們是在一個(gè)已有的項(xiàng)目中引入React，我們可能會(huì)在不同的部分單獨(dú)定義React根節(jié)點(diǎn)。
渲染方法：ReactDOM.render();
我們將元素傳入這個(gè)方法，就可以將傳入的元素渲染到頁(yè)面上：

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

更新元素渲染

我們想想加入我們想我們定義的元素，如何做？當(dāng)元素被創(chuàng)建后，目前是無(wú)法改變其內(nèi)容和屬性的。
一個(gè)元素就好像動(dòng)畫(huà)里的一幀，代表著頁(yè)面某一個(gè)時(shí)間點(diǎn)的樣子。
我們目前還沒(méi)學(xué)習(xí)state什么的，根據(jù)現(xiàn)有的知識(shí)，我們想要更新頁(yè)面的方法只有創(chuàng)建一個(gè)新的元素，然后將它傳入渲染的方法中，重新渲染。
比如計(jì)數(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);

這個(gè)例子，我們每秒傳入render一個(gè)元素，每秒重新渲染一次。
注意：實(shí)際上，大多數(shù)時(shí)候React應(yīng)用只會(huì)調(diào)用一次render方法，后續(xù)我們會(huì)繼續(xù)學(xué)習(xí)。

React只會(huì)更新必要的部分

在上一個(gè)例子中，感覺(jué)上是每秒重新渲染一次，就應(yīng)該是根節(jié)點(diǎn)的所有內(nèi)容都會(huì)被替換重新渲染，我們可以打開(kāi)控制臺(tái)查證，并不是如此。

image.png

我們看變化的只有時(shí)間，其他的并沒(méi)有變化。
事實(shí)上，React DOM 首先會(huì)比較元素內(nèi)容先后的不同，而在渲染過(guò)程中只會(huì)更新改變了的部分。