什么是虚拟DOM？

yusirxiaer

于 2023-02-07 22:13:36 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/yusirxiaer/article/details/128926935

本文介绍了虚拟DOM的概念，它是React中的一个重要概念，用于优化DOM操作。通过React.createElement方法或jsx语法创建的虚拟DOM，是一种简化和优化真实DOM操作的数据结构。虚拟DOM是一个包含了标签类型、属性和子元素的对象，减少了DOM的直接操作，提升了性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

熟悉 react 的同学对于 React.createElement 方法一定不会陌生，它用于创建reactNode，语法如下：

/*
* component 组件名，一个标签也可以理解成一个最基础的组件
* props 当前组件的属性，比如class，或者其它属性
* children 组件的子组件，就像标签套标签
*/
React.createElement(component, props, ...children)

比如我们定一个最简单的html片段：

<span className='span'>hello echo</span>

用React.createElement表示如下：

React.createElement('div', {className:'span'}, 'hello echo');

这样看好像也没什么大问题，但是假定我们dom存在嵌套关系：

<span className='span'>
  <span>
    hello echo
  </span>
</span>

用React.createElement表示就相对比较麻烦了，你需要在createElement中不断嵌套：

React.createElement('span', {className:'span'}, React.createElement("span", null, "hello echo"));<

200万优质内容无限畅学