DOM与虚拟DOM的概念

最新推荐文章于 2024-05-15 10:36:31 发布

samfung09

最新推荐文章于 2024-05-15 10:36:31 发布

阅读量2.1k

点赞数 2

分类专栏： JavaScript 文章标签： dom 虚拟dom

本文链接：https://blog.csdn.net/samfung09/article/details/80182663

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

DOM的本质：

浏览器概念，浏览器从服务器端读取html页面，浏览器将html解析成一棵元素嵌套关系的dom树，用对象来表示页面上的元素，并提供操作dom对象的api。

虚拟DOM：

框架概念，程序员用js对象来模拟页面上dom元素的嵌套关系( 本质 )，为了实现页面元素的高效更新( 目的 )

react中

//虚拟dom实质就是一个js对象可以声明变量直接使用
let el = <h2>hello, world!</h2>;
let el2 = React.createElement('h2', null, 'hello world')
//以上两种写法同样效果
ReactDOM.render(
    el,
    document.getElementById('root')
);

jsx语法转化过程

// 1、JSX
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
)

// 2、JSX -> createElement
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
)

// React elements: 使用对象的形式描述页面结构
// Note: 这是简化后的对象结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
  },
  children: ['Hello, world']
}