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更新。