24【React基础-3】元素渲染

迷南。 2022-12-17 14:57 136阅读 0赞

### 写在前面 ###

本文是【React基础】系列的第三篇文章，这篇文章中我们介绍一下在react中的"元素"这个概念，并且了解下它跟我们传统的浏览器DOM元素有什么不同。

### 概述 ###

上一篇文章我们为大家介绍了react中独特的代码编写方式——JSX。通过上文的了解，我们知道我们可以将一段HTML标签代码直接赋值给一个JS变量，并且将这个变量传给react相应的方法之后，前端浏览器页面就会看到预期的显示效果，那在这个过程中，我们本文所介绍的"元素"这个东西到底是什么呢，我们接下来给大家简单介绍一下。

### 项目demo地址 ###

> https://github.com/xuqwCloud/reactbasic

### 元素简介 ###

在react中元素是构成react应用的最小单元，我们上一节提到的"组件"其实也是由元素构成，所以它们三者的关系就像这样：

> 元素构成组件，组件构成项目应用。

其实在react应用中元素描述了我们在页面上看到的内容。

我们之前定义过的element变量其实就是一个元素。react的元素跟我们浏览器的DOM元素不同，react的元素其实就是一个JS的普通对象，react dom会负责更新DOM元素并将其与react的元素保持一致。

### 元素渲染 ###

我们将一个react元素渲染到页面的话，是要通过ReactDOM的render()方法来渲染的，例如下面的代码：

import React from 'react';
    import ReactDOM from 'react-dom';
    
    let element = <h1>元素渲染</h1>;
    
    ReactDOM.render(element, document.getElementById('root'));

上述代码就是将element这个元素通过ReactDOM的render()方法渲染到了页面上。render()方法需要传入两个参数：第一个参数是要渲染的元素，第二个参数是将要渲染的元素被渲染到的dom节点。在我们的react应用中，ReactDOM.render()方法其实就在index.js文件中调用了一次，所以我们会看到通过脚手架创建的react应用，这个方法的第二个参数一般都是一个id为"root"的div标签元素，因为我们所有的组件全都是渲染在这个div中的，但是如果你需要在其他的地方另外渲染另一个react页面元素或者集成一个已有的react应用的话，你可以再次调用这个方法，第二个参数传入另一个div标签元素。

### 元素更新 ###

react中的元素是一个不可改变对象，所以它一旦创建后是不允许改变的，包括更改它的子元素和属性这些都是不允许的，如果我们要更新它的子元素或者属性的话，只能新建一个全新的元素，然后将这个元素传入ReactDOM.render()方法。

所以大家可能就会问，那这样一来性能岂不是很低了嘛？如果我想仅仅更改一个属性，我却需要创建一个全新的元素，并将这个元素传入ReactDOM.render()方法，这就相当于渲染了一个全新的页面啊，那么事实是这样吗，我们来看一个计数器的例子：

import React from 'react';
    import ReactDOM from 'react-dom';
    
    function tick() {
        const element = (
            <div>
                <h1>X北辰北!</h1>
                <h2>It is {new Date().toLocaleTimeString()}.</h2>
            </div>
        );
        ReactDOM.render(element, document.getElementById('root'));
    }
    
    setInterval(tick, 1000);

上述代码就是在一个定时器里面循环调用ReactDOM.render()方法，并每次传入一个react元素，按照我们上述的猜想，页面每次会重新渲染这部分页面，那么事实是这样子嘛，我们打开浏览器控制台看一下：

![20201024090633856.png][]

如上图所示我们可以看到，虽然我们每次调用ReactDOM.render()方法传进去了一个新的react元素，但是它并没有每次渲染传进去的整个元素，仅仅是渲染上一次和这次新传进去的元素中间变化了的部分，也就是上述例子中的"时间"这部分一直在改变，但是其余的部分并没有发生变化，这是为什么呢？原来React DOM它会将我们传入的元素及其子元素和它们之前的状态进行比较，然后只会进行必要的更新来达到我们预期的效果，就像上图一样，它通过比较后仅仅更新"时间"那部分DOM。

上述例子中尽管我们每一秒都会传进去一个描述整个UI树的元素，但是React DOM仅仅会更新改变了的内容。

以上就是关于React中元素的介绍以及元素渲染相关的介绍，大家只需要知道在react中什么是元素，并且我们即使传入一整个UI树，它仅仅会更新改变了的内容就行，后面更详细的内容我们在后续文章中介绍。

[20201024090633856.png]: /images/20221122/1693b9405f174b76aeeac1cb9cd70cae.png