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']
}