React基础 —— 渲染元素

zhanghuali2019

于 2018-10-30 14:10:33 发布

阅读量195

点赞数

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.youkuaiyun.com/zhanghuali0210/article/details/83540638

React 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了React中元素的渲染过程，包括如何将React元素渲染到DOM中，以及如何通过创建新元素来更新UI。此外，还深入探讨了React在更新元素时的优化策略，确保只更新必要的部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、将元素渲染到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更新。