React.createElement生成描述对象,这时候还没有生成虚拟DOM
React生成得元素得描述对象(el还不是虚拟DOM) 值是元素得描述对象,react根据描述对象去生成虚拟DOM
JSX能生成下面这个描述对象,用react.createElement也能生成下面得描述对象,最后再有react.render去生成虚拟DOM然后再渲染真实DOM,虚拟DOM会去做对比,和上一次内存里保存的对象
const el=React.createElement('div',{id:'box'},React.createElement('h2',{className:"box"},'hello world'),React.createElement('p',null,'11111'))
console.log(el)
此时el是个对象,描述对象。JSX也能生成日下的描述对象
- {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}
- $$typeof: Symbol(react.element)
- key: null
- props: //标签内上的属性和内容都放在props对象里,其中chidren存放子元素标签(文本内容也是标签的子元素标签),style用对象存放,其他属性也都依次排列存放
- children: Array(2)
- 0: "box" //div文本
- 1://div下的标签元素
- $$typeof: Symbol(react.element)
- key: null
- props: {className: "boxs", children: Array(2)}
- ref: null
- type: "div"
- _owner: null
- _store: {validated: true}
- _self: null
- _source: null
- __proto__: Object
- length: 2
- __proto__: Array(0)
- id: "box" //标签上的属性
- style: {height: "200px"} //标签上的属性
- __proto__: Object
- ref: null
- type: "div"
- _owner: null
- _store: {validated: false}
- _self: null
- _source: null
- __proto__: Object