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节点!