React基礎 —— 渲染元素
阿新 • • 發佈:2018-12-05
一、將元素渲染到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更新。