1.createElement

时间:2019-10-20
本文章向大家介绍1.createElement,主要包括1.createElement使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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也能生成日下的描述对象

    1. {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}
      1. $$typeof: Symbol(react.element)
      2. key: null
      3. props:  //标签内上的属性和内容都放在props对象里,其中chidren存放子元素标签(文本内容也是标签的子元素标签),style用对象存放,其他属性也都依次排列存放
        1. children: Array(2)
          1. 0: "box"   //div文本
          2. 1://div下的标签元素
            1. $$typeof: Symbol(react.element)
            2. key: null
            3. props: {className: "boxs", children: Array(2)}
            4. ref: null
            5. type: "div"
            6. _owner: null
            7. _store: {validated: true}
            8. _self: null
            9. _source: null
            10. __proto__: Object
          3. length: 2
          4. __proto__: Array(0)
        2. id: "box //标签上的属性
        3. style: {height: "200px"} //标签上的属性
        4. __proto__: Object
      4. ref: null
      5. type: "div"
      6. _owner: null
      7. _store: {validated: false}
      8. _self: null
      9. _source: null
      10. __proto__: Object

原文地址:https://www.cnblogs.com/lucy-xyy/p/11708026.html