React虚拟dom

简介: React虚拟dom

1.本质

1.Virtual DOM本质是一棵以javascript对象作为基础的树,实际上它是一层对真实DOM的抽象,之后经过处理将虚拟dom更新到真实的dom结构上,Virtual DOM简单来说既是一个js对象,是更加轻量级的DOM描述


1.Virtual DOM的优缺点

1.优点:

a.数据发生改变时对虚拟dom进行修改,反映到真实的dom结构上,提高渲染效率

b.可以使框架跨平台

c.组件高度抽象化

d.可以更好地实现SSR,同构渲染等

2.缺点

a.首次渲染需要大量的虚拟dom计算,初次渲染效率低

b.多占据了部分内存

c.当页面中dom节点少的情况下,使用虚拟dom反而会降低页面渲染效率


目录
相关文章
|
JavaScript 前端开发 算法
React技术栈-虚拟DOM和DOM diff算法
这篇文章介绍了React技术栈中的虚拟DOM和DOM diff算法,并通过一个实际案例展示了如何使用React组件和状态管理来实现动态更新UI。
158 2
|
JavaScript 前端开发 算法
react中虚拟dom和diff算法
在React中,虚拟DOM(Virtual DOM)和Diff算法是两个核心概念,它们共同工作以提高应用的性能和效率。
140 4
|
JavaScript 前端开发
react学习(3)创建虚拟dom的两种方式
react学习(3)创建虚拟dom的两种方式
233 68
|
JavaScript 前端开发 算法
React 虚拟 DOM 深度解析
【10月更文挑战第5天】本文深入解析了 React 虚拟 DOM 的工作原理,包括其基础概念、优点与缺点,以及 Diff 算法的关键点。同时,分享了常见问题及解决方法,并介绍了作者在代码/项目上的成就和经验,如大型电商平台的前端重构和开源贡献。
180 3
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
165 3
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
388 0
react字符串转为dom标签,类似于Vue中的v-html
源码分析-react3-创建dom
React.createElement class Welcome extends React.Component { constructor(){ super() this.state={ test:1} } render() { return Hello, {this.
918 0
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
732 0
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
193 0
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
400 0