说说react 中jsx语法糖的本质？

一.基本概念

React 使用 JSX 来替代常规的JavaScript。

JSX 是按照 XML 语法规范 的 JavaScript 语法扩展。

JSX 语法的本质：并不是直接把 JSX 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的。

二.jsx优点

1.JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化；
2.它是类型安全的，在编译过程中就能发现错误；
3.使用 JSX 编写模板更加简单快速。

三.jsx基本使用

1.定义虚拟DOM时不要用引号

let VDOM = <h1>hello,react</h1>

2.JS表达式需要用 {} 进行包裹

let str  = "hello,react!";
let VDOM = (
     <h1><span>{str}</span></h1> 
)

3.className样式的类名

let VDOM = (
        <h1 className='demo'><span>hello,react!</span></h1>
)

4.内联样式用style={{}}

let VDOM = (
<h1 className='demo'><span style={{color:'blue',fontSize:'30px'}}>hello,react!</span></h1>
 )

5.只能一个根标签

 // 定义虚拟dom 
const VDOM =(
    <div>
        <p style={{color:'green',fontSize:'20px'}}>姓名:react</p>
        <p className="myage">年龄:18</p>
    </div>
)
ReactDOM.render(VDOM, document.getElementById('root'));

6.标签必须闭合

<input type="text" name="" value=""></input>

7. 标签首字母

1.若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。

2.若大写字母开头,react就去渲染对应组件,若组件没有定义,则报错。