虚拟DOM总的来说就是一个JS对象，用来描述真实的DOM。
<div id='abc'><span>hello</span></div>
相当于
[ ' div ' , { id : ' abc ' } , [ ' span ' , { } , ' hello' ] ]
性能提升的地方在于，数据改变时，改变js对象
然后用对比js对象的方式替代对比新旧DOM的方式。
大致步骤
1.state数据
2.JSX模板
3.数据+模板生成虚拟DOM
4.根据虚拟DOM生成真实DOM
5.state改变
6.数据+模板生成新的虚拟DOM
7.比较新旧虚拟DOM的区别
8.直接操作DOM，改变结构
JSX——>JS对象——>真实的DOM
diff算法中有一个概念叫同级比较
image.png
从顶层开始同层对比，如果一层有差异，则这一层下面几层就不对比了，直接销毁，重新生成。
image.png
什么是JSX React的核心机制之一就是虚拟DOM：可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来...
Hello World JS创建虚拟DOM JSX创建虚拟DOM 虚拟DOM与真实DOM 下一篇：React基础篇...
React 的更新流程 React 的渲染流程是: JSX → 虚拟 DOM → 真实 DOM React 的更新...
React 术语，React element tree 是什么？和 Virtual DOM(VDOM、虚拟 DOM...
react:速度快，虚拟DOM，setState的时候虚拟dom会与实际dom进行比较，有变化再去更新实际dom，...
React 虚拟DOM的理解 React框架现在用的人非常多，React为何如此受欢迎？我想原因是引入了虚拟DOM...
一、 JSX和组件的概念React的核心机制就是虚拟DOM，可以在内存中创建的虚拟DOM元素，React利用虚拟D...
一、什么是虚拟DOM 虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vu...
文章结构： React中的虚拟DOM是什么？ 虚拟DOM的简单实现（diff算法） 虚拟DOM的内部工作原理 Re...
React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而...
本文标题：react虚拟DOM
本文链接：https://www.haomeiwen.com/subject/xfrkuctx.html
网友评论