React從入門到精通系列之(3)渲染元素

3、渲染元素

React元素是React應用程序的最小構建結構。
React元素描述了您想在屏幕上看到什麼：

const element = <h1>hello world</h1>;

與瀏覽器DOM元素不一樣，React元素是純對象，建立起來很方便。 React DOM負責匹配React元素並更新DOM。

note
人們可能將元素與更廣爲人知的「組件」概念混淆。 咱們將在下一節中介紹組件。 元素是由什麼組件組成的，咱們建議您在向前跳過以前閱讀此部分。

渲染元素到DOM中

假設您的HTML文件中有一個<div>：

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

咱們將其稱爲「root」DOM節點，接下來其中的全部內容將由React DOM來管理。

僅使用React構建的應用程序一般具備單個 root DOM節點。 若是你正在將React集成到現有的應用程序中，則能夠建立儘量多單獨的 root DOM節點。

要將React元素渲染到 root DOM節點，能夠將它們都傳遞給ReactDOM.render()方法:

import React from 'react';
import ReactDOM from 'react-dom';

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

更新渲染元素

React元素是不可變的。 建立元素後，您不能更改其子元素或屬性。
React元素就像電影中的單個幀：它表示某個時間點的UI。

到目前爲止，以咱們的知識，更新UI的惟一方法是建立一個新的元素，並將其傳遞給ReactDOM.render()。

考慮這個滴答時鐘示例：

import React from 'react';
import ReactDOM from 'react-dom';

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()的回調函數中調用ReactDOM.render()。

note
實際上，大多數React應用程序只調用ReactDOM.render()一次。 在接下來的章節中，咱們將學習如何將這樣的代碼封裝成有狀態的組件。

按需更新

React DOM將元素及其子元素的內容與該元素變化以前的內容進行比較，並僅進行DOM更新以使DOM達到所需的狀態。
您能夠經過使用瀏覽器工具檢查最後一個示例來驗證。
即便咱們在每一個tick上建立一個描述整個UI樹的元素，只有內容發生改變的文本節點才被React DOM更新。

在咱們的經驗中，思考UI應該如何更新給定的時間，而不是隨着時間的更改去修改總體的內容(DOM比較，按需更新)。