React入门——3.元素渲染

本节内容为对元素渲染 - React的整理归纳，如果你直接阅读此React官方文档较为吃力，可以对照本节与React文档中的相应章节作为解释，也许会加快你的阅读理解速度

const element = <h1>Hello,World</h1>

这是一个很常见的常量，值是JSX标签，不过在React中，它还有另一种定义——元素
当我们使用此元素来确定页面具体内容时，会由React DOM来帮助我们更新浏览器DOM保持和元素的一致。

React是如何将元素渲染成组件的？

以第一节的例子来说，首先在index.html存在<div class="root"></div>的节点。
我们一般将这个"root"节点叫做根节点,同时根节点的所有内容都由React DOM进行管理。
一个React应用通常只有一个单一根DOM节点，如果将React集成进已有应用，也可以存在多个独立根DOM节点。
可以通过ReactDOM.render()函数将React元素渲染到DOM节点中:

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

通过Create React App脚手架工具创建的React项目可以在index.js中看到相应代码

ReactDOM.render(<App/>, document.getElementById('root'));

React如何更新已渲染的元素？

React元素是不可变对象，一旦被创建，则它的子元素及属性就无法改变了。一个元素就像电影的单帧，它代表了某个特定时刻的UI。

let name = '张三'
ReactDOM.render(
    <div>
        Hello World!{name}
    </div>,
    document.getElementById('root')
);
name = '李四'
// Hello World!张三

如果这一部分你目前觉得无法理解，可以先理解为，和普通的HTML标签不同，通过React生成的HTML标签的内容和子标签、HTML标签的属性在生成完成后就无法改变了

根据目前已经提到的知识点，想要更新UI的的唯一方式是创建一个全新的元素，并将其传入ReactDOM.render()函数

那么此时我们考虑一个网页时钟的例子，在React元素是不可变对象的情况下，我们需要在网页展示当前时间，我们可以选择使用setInterval()来多次反复调用ReactDOM.render()

function test(){
    ReactDOM.render(
        <div>
            Hello World!
            {new Date().toLocaleTimeString()}
        </div>,
        document.getElementById('root')
    );
}
setInterval(test,1000)

需要注意的是，在实际项目中，ReactDOM.render()通常只会被调用一次！

React只更新需要更新的部分

React会对比React元素和子元素与他们之前的状态的差异，并更新存在差异的DOM，以达到预期的状态。
以上个例子为例，通过setInterval()我们每秒都会生成一个描述整个UI树的元素，但是React DOM实际上只会更新发生变化了的部分，也就是例子中的时间。

参考文件

元素渲染 - React
最后更新于2022年3月28日
原创不易，如果该文章对你有所帮助，望左上角点击关注~如有任何技术相关问题，可通过评论联系我讨论,我会在力所能及之内进行相应回复以及开单章解决该问题.

该文章如有任何错误请在评论中指出，感激不尽，转载请附出处！
个人博客首页：https://blog.csdn.net/yjrguxing ——您的每个关注和评论都对我意义重大