React学习之旅Part1：虚拟DOM和Diff算法

最新推荐文章于 2023-11-14 09:57:28 发布

Piconjo_Official

最新推荐文章于 2023-11-14 09:57:28 发布

阅读量2.7k

点赞数 2

分类专栏：前端文章标签： javascript js react 前端 reactjs

本文链接：https://blog.csdn.net/Piconjo/article/details/106591791

版权

前端专栏收录该内容

99 篇文章 4 订阅

订阅专栏

本文介绍了React的核心知识点——虚拟DOM和Diff算法。虚拟DOM是React中用来模拟DOM结构，提升性能的关键，通过JavaScript对象表示DOM及嵌套。Diff算法则用于高效地比较新旧虚拟DOM树，分为tree diff、component diff和element diff三个阶段，确保页面按需更新，降低DOM操作带来的性能影响。

摘要由CSDN通过智能技术生成

一、概念

React 是一个用于构建用户界面的JavaScript库
React可以构建高效快速的用户界面它是一个轻量级库因此很受欢迎
它遵循组件设计模式声明式编程范式和函数式编程概念以使前端应用程序更高效
它使用虚拟DOM来有效地操作DOM 并且它遵循从高阶组件到低阶组件的单向数据流

React有两个重要知识点：虚拟DOM和Diff算法
它们可以说是React的核心内容

二、核心

虚拟DOM(Virtual Document Object Model)

DOM是浏览器中的概念即用JS对象来表示页面中的元素提供操作DOM对象的API
而虚拟DOM是框架中的概念框架用JS对象来模拟页面中的DOM和DOM嵌套
其主要目的是实现页面中的DOM元素的高效更新

例：一个表格当其中一小部分数据发生改变时没必要全部重新渲染
但若使用模板引擎的话会全部重新渲染也仅仅将数据渲染到页面上会产生性能上的问题
若要实现最优的性能需要按需渲染页面只重新渲染更新部分的数据尽量减少DOM操作以提高性能

若要实现页面的按需更新…

网页呈现的过程：
1、浏览器请求服务器获取页面的HTML代码
2、浏览器在内存中解析DOM结构并在浏览器内存中渲染出一棵DOM树
3、浏览器将DOM树呈现在页面上

假设内存中有两棵DOM树：其中一棵DOM树是旧的另一棵DOM树是最新的
当需要按需更新的时候将两棵DOM数中的每一条数据进行对比
若数据不一致则代表需要更新
若数据一致则不更新了

那么问题来了：如何获取新旧两棵DOM树从而实现对比？
在浏览器中并没有提供获取DOM树的API(只能获取元素)
因此无法获取浏览器内存中的DOM树

但是可以手动模拟出DOM树
那么如何模拟DOM树？

比如要模拟：

<div id="mydiv" class="myclass">
	我叫陈涛
	<p>来自浙江</p>
</div>

可以用JS实现：

var div={
	tagName:"div",
	attrs:{
		id:"mydiv",
		class:"myclass"
	},
	childrens:[
		"我叫陈涛",
		{
			tagName:"p",
			attrs:{},
			childrens:[
				"来自浙江"
			]
		}
	]
}