React浅析(四)：jsx

JavaScript和XML的合体。
JSX是一种语法糖，经过babel转换成js再运行。

let component = <div>hello world!</div>

这样长相的，称之为 JSX 。
那么，jsx是如何解析的?
来人！！上代码！

自拍照.png

import React, {component} from 'react';//有木有人觉得奇怪过，全文都没有用到React,这里还引入来作甚？？？
class Home extends Component{
  //此处省略一万行代码
    render(){
       return(
           <div>
                <h1>这是个标题！</h1>
                <p className=’title'>这也是个标题！</p>
            </div>
        )
    }
}

引入的React在全局中，经过babel转换下，调用了React.createElement()，转换为以下的形式

React.createElement(
    'div',
    null
    React.createElement('h1',null,'这是个标题！'),
    React.createElement('p',{className:'title'},'这也是个标题！')
)

当然jsx语法除了以上的标签，还可以展示js表达式，判断，循环，事件绑定等。这里不做过多的叙述

React.createElement 传参形式

React.createElement(tag, property,child)

React.createElement(tag, property,[…])

//打印Home元素
{
    attributes:null,
    children:[
        {
            attributes:null,
            children:[],
            key:undefined,
            nodeName:'h1'
        },
        {
            attributes:{className:'title'},
            children:[],
            key:undefined,
            nodeName:'p'
        },
    ],
    key:undefined,    
    nodeName:'div'
}

以上的数据结构，不难看出，jsx语法糖经过babel编译后，行程一种js对象，这个对象也就是虚拟DOM，使用虚拟DOM进行页面更高效的渲染。

到这一步，我们又开始提出新的疑问了，那这个虚拟DOM是如何转换为真实DOM的？请看下一章，vdom和Render！！~~~