0%

【React基础-3】元素渲染

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

概述

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

项目demo地址

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

元素简介

在react中元素是构成react应用的最小单元,我们上一节提到的”组件”其实也是由元素构成,所以它们三者的关系就像这样:元素构成组件,组件构成项目应用。其实在react应用中元素描述了我们在页面上看到的内容。

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

元素渲染

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

1
2
3
4
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()方法,这就相当于渲染了一个全新的页面啊,那么事实是这样吗,我们来看一个计数器的例子:

1
2
3
4
5
6
7
8
9
10
11
12
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元素,按照我们上述的猜想,页面每次会重新渲染这部分页面,那么事实是这样子嘛,我们打开浏览器控制台看一下:

img

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

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

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