在React App里面，最小的構(gòu)建單位就是元素。

一、將元素渲染到DOM里去

假設(shè)我們在HTML里面有個div：

<div id="root"></div>

然后我們調(diào)用ReactDOM.render()來把一個元素渲染到這個div里面去：

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

二、更新已渲染的元素

React里面的元素，是不可改變的。一旦創(chuàng)建了元素，就不能改變它的屬性和子元素。
唯一可以更新UI的操作，那就是再創(chuàng)建一個新的元素，然后扔給ReactDOM.render()，再去渲染一遍。

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);

上述代碼，一執(zhí)行，這個Hello world下面的時間就開始走了。

image.png

三、只更新需要更新的部分

雖然ReactDOM.render()是把整個元素重新渲染了一遍，但并不表示它是完全從頭開始干活。為了提高效率，避免頁面閃爍，它還是用最小的代價(jià)來更新渲染的。從chrome瀏覽器的審查里面我們可以看到，上面的頁面啊，只更新了一個時間，其他都沒動。

image.png