React中关于JSX

JSX由react推广出来的一个js语法糖！

在React项目中我们的组件中第一句话都是引用react，

import React from 'react';

但是在代码中却没有使用到，那它的作用是什么呢？

浏览器只认识html css js语言，其他的格式语言最后都需要转成这3种之一的

在React中使用JSX语法糖写代码时，最后还是会被编译成js的

<div className='abc'>
        <ul>
            <li>Item1</li>
        </ul>
    </div>

转义之后：

React.creactElement('div',{{className:'abc'}},
        React.creactElement('ul',null,
            React.creactElement('li',null,'Item1')
        )
    )；

变成这种格式！是不是很像snabbdom中h方法 

这个时候用到了React对象了！！！

###########################################################

<div className='abc'>   
    <Component />
    <ul>
        <li>Item1</li>
    </ul>
</div>

上面这种html结构，里面存在组件，JSX在解析的时候又怎么弄呢？

React.creactElement('div',{{className:'abc'}},
        React.createElement(Component,null),   // 这个还是自定义组件，到时候浏览器怎么认识呢
        React.creactElement('ul',null,
            React.creactElement('li',null,'Item1')
        )
    )；

在react中每一个自定义组件中都必须有一个render（）函数，render()函数必须有一个return ，

最后全部都是虚拟的dom节点！