1. 程式人生 > >React基礎 —— 渲染元素

React基礎 —— 渲染元素

一、將元素渲染到DOM中

假設<div>你的HTML檔案中有一個地方,將React元素呈現到DOM節點,將兩者都傳遞給ReactDOM.render()。

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

二、更新元素渲染

React元素是不可變得。建立元素後,無法更改其子元素火屬性。到目前,更新UI的唯一方法是建立一個新元素,並將其傳遞給ReactDOM.render()。

function tick(){
    const element = (
        <div>
            <h1>Hello,world!</h1>
            <h2>It is {new Date().toLocalTimeString()}.</h2>
        </div>
    );
    ReactDOM.render(element,document.getElementById('root'));
}
setInterval(tick,1000);

三、React更新細節

React DOM將元素及其子元素與前一元素進行比較,並僅應用使DOM達到所需狀態所需的DOM更新。   如上述例子,即使我們在每個tick上建立描述整個UI樹的元素,但只有內容已更改的文字節點才會被React DOM更新。