元素是 React 應(yīng)用程序的最小構(gòu)建塊。

一個(gè)元素描述了你想在屏幕上看到的內(nèi)容：

const element = <h1>Hello, world</h1>;

與瀏覽器 DOM 元素不同，React 元素是普通對象，創(chuàng)建起來很便宜。React DOM 負(fù)責(zé)更新 DOM 以匹配 React 元素。

注意：   人們可能會將元素與更廣為人知的“組件”概念混為一談。我們將在下一部分介紹組件。元素是什么組成部分“由”組成，我們鼓勵(lì)您在跳躍前閱讀本節(jié)。

將元素渲染到 DOM 中

假設(shè)<div>您的 HTML 文件中存在某個(gè)地方：

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

我們稱之為“根”DOM 節(jié)點(diǎn)，因?yàn)樗鼉?nèi)部的所有內(nèi)容都將由 React DOM 進(jìn)行管理。

僅使用 React 構(gòu)建的應(yīng)用程序通常具有單個(gè)根 DOM 節(jié)點(diǎn)。如果您將 React 集成到現(xiàn)有的應(yīng)用程序中，則可以根據(jù)需要擁有盡可能多的獨(dú)立根 DOM 節(jié)點(diǎn)。

要將 React 元素渲染到根 DOM 節(jié)點(diǎn)中，請將兩者傳遞給ReactDOM.render()：

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

在 CodePen 上試用它。

它在頁面上顯示“Hello，world”。

更新呈現(xiàn)的元素

React 元素是不可變的。一旦創(chuàng)建了一個(gè)元素，就不能更改其子元素或?qū)傩浴Ｔ鼐拖耠娪爸械膯蝹€(gè)框架：它表示某個(gè)時(shí)間點(diǎn)的用戶界面。

根據(jù)我們目前的知識，更新 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);

它每秒從setInterval()回調(diào)中調(diào)用ReactDOM.render()。

注意：   實(shí)際上，大多數(shù) React 應(yīng)用程序只會調(diào)用ReactDOM.render()一次。在接下來的部分中，我們將學(xué)習(xí)如何將這些代碼封裝到有狀態(tài)的組件中。我們建議您不要跳過主題，因?yàn)樗鼈兓ハ鄻?gòu)建。

反應(yīng)只是更新什么是必要的

React DOM 將元素及其子元素與前一元素進(jìn)行比較，并僅應(yīng)用必要的 DOM 更新以使 DOM 達(dá)到所需的狀態(tài)。

您可以通過使用瀏覽器工具檢查最后一個(gè)示例來進(jìn)行驗(yàn)證：

即使我們創(chuàng)建了一個(gè)元素來描述整個(gè) UI 樹，但只有內(nèi)容已更改的文本節(jié)點(diǎn)才會被 React DOM 更新。

根據(jù)我們的經(jīng)驗(yàn)，思考如何在任何特定時(shí)刻看到 UI，而不是隨著時(shí)間的推移如何改變，從而消除了一整類錯(cuò)誤。