JSX语法基础总结

题记：首先我们要了解一下jsx是什么，跟js有什么区别，其实就是js的语法糖，加上了xml的语法，使得产生虚拟dom更加的方便，简单说一下，xml就是存储数据的格式，想了解xml的话，可以结合json格式相互对比。

举例：

//用js去写

let Dom = React.creatElemnt('h1',{id:'header'},'你好啊');
let Doms = React.creatElemnt('h1',{id:'header'},React.craetElement('span',{id:'center'},"你好啊")


//用jsX写
let Dom = (
    <h1 id='title'>
        你好
    </h1>
)

let Doms = (
    <h1 id='title'>
       <span>
        你好
       </span>
    </h1>
)

jsx语法规则：

01.定义时无序引号。

let Doms = (
    <h1 id='title'>
       <span>
        你好
       </span>
    </h1>
)

02.标签中混入表达式用{}包裹。

      注：表达式跟代码语句不一样的欧，也就是说if语句，for语句不能被{}包裹；函数和变量是表达式，for和if叫做代码语句。

let name = 'title'
let commins = '你好'

let Doms = (
    <h1 id={title}>
       <span>
        {commins}
       </span>
    </h1>
)

let name = 'title'
let commins = '你好'
let arr = ['a','b','c]
let Doms = (
    <div id={title}>
       <span>
        {Array.map((item,index)=>
            {
             return <li key={index}>{item}</li>      
            )}
       </span>
    </div>
)

03.样式的类型指定不用class，用className；

let name = 'title'
let commins = '你好'
let niu = 'niuniu'
let Doms = (
    <h1 id={title} className={niu}>
       <span>
        {commins}
       </span>
    </h1>
)

04.行内样式一样要加上{ {}}；

let name = 'title'
let commins = '你好'

let Doms = (
    <h1 id={title}>
       <span style={
   
   {margin:20px}}>
        {commins}
       </span>
    </h1>
)

05.根标签只有一个，跟Vue2一样；

06.标签必须闭合；

07.标签首字母

        1.若小写字母开头，将转为html标签；

        2.若大写字母开头，则会找相应的组件，如果没有这样的组件报错，结合Vue组件命名规范；