React|web前端高级React - React从入门到进阶之元素渲染 React元素渲染|虚拟DOM|真实DOM

系列文章目录
第一章：React从入门到进阶之初识React
第二章：React从入门到进阶之JSX简介
第三章：React从入门到进阶之元素渲染
第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
第五章：React从入门到进阶之组件化开发及Props属性传值
第六章：React从入门到进阶之state及组件的生命周期
第七章：React从入门到进阶之React事件处理

文章目录

- - 系列文章目录
  - 一、元素的渲染
  - 二、更新已渲染的元素
  - 三、元素的局部更新

一、元素的渲染

元素是构成react应用的最小单元，它用于描述屏幕上输出的内容，也就是我们常说的虚拟DOM

与浏览器的DOM元素不同，React元素是创建开销极小的普通对象，然后通过ReactDOM更新真实DOM来与React元素保持一致

我们平时在浏览器中看到的内容都是由真实DOM元素构成的；React最终会把虚拟DOM元素转换为真实DOM并渲染

在第一章中我们讲项目的目录结构时提到public/index.html，在这个文件中有个id为“root”的div元素，我们将其称为“根”DOM节点，因为该节点内所有的内容都将有React DOM管理

我们在使用React构建应用时通常只会定义一个单一的根节点。但是如果我们想在一个已有的项目中引入React的话，那么我们可能需要在不同的部分单独定义React的根节点，因为在React的每个组件（后面章节会讲解组件）中只能有一个根节点存在

要想将React元素渲染到根DOM节点中，我们只需把它们传入ReactDOM的render方法即可，如下代码：

const element = Hello, world! ReactDOM.render( element, document.getElementById("root") );

执行上面的代码，页面上就会出现“Hello, world”

二、更新已渲染的元素

React 元素都是不可变的。当元素被创建之后，我们是无法改变其内容或属性的。
目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法替换原来的元素来重新渲染：
来看一下这个计时器的例子:

function tick() { const element = ( Hello, world! 现在是 {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000);

上面代码中我们定义了一个tick方法，在方法中定义了React元素并调用ReactDOM的render方法将元素渲染到根DOM节点root中，并在定时器中每隔1秒调用一次函数从而重新渲染页面。

我们还可以将React元素和JavaScript代码进行分离，把要展示的React元素封装起来，然后通过属性传值（后面章节中讲解）的方式把值动态的传给React元素，从而达到react元素与js代码分离的效果,看如下示例：

function Clock(props) { return ( Hello, world! 现在是 {props.date.toLocaleTimeString()}. ); } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000);

另外：除了函数外我们还可以创建一个 React.Component 的 ES6 类，该类封装了要展示的元素，需要注意的是在 render() 方法中，需要使用 this.props 替换 props，后面的章节中会详细讲解

class Clock extends React.Component { render() { return ( Hello, world! 现在是 {this.props.date.toLocaleTimeString()}. ); } } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000);

三、元素的局部更新

React在更新已渲染的元素的时候，ReactDOM会将元素和它的子元素与它们之前的状态进行对比，并只会更新与之前状态不一样的元素，也就是说发生了变化的元素
我们可以通过浏览器的检查元素工具查看上一个例子来确认这一点。

文章图片

尽管每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容，也就是例子中的文本节点