react 子元素更新_【跟着官网学React】元素渲染

2021年目标

每日更新一篇公众号文章！！！

写在前面

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

概述

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

元素简介

在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元素，按照我们上述的猜想，页面每次会重新渲染这部分页面，那么事实是这样子嘛，我们打开浏览器控制台看一下：

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

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

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

附： 扫码关注我 公众号：WebGIS应用开发 在这里既有Web，也有GIS 欢迎大家关注，一起进步~

一个有性格的公众号

ID:X北辰北