JSX语法

一、什么是JSX语法

在js中直接使用html标签，而不是以字符串的形式使用html标签的语法称为JSX语法

二、JSX语法在react中的使用

1. 使用JSX语法的文件需要引入React对象

2. 使用自己的组件时，标签要大写，比如：

在index.js中
```javscript
...
import App from './App'
ReactDOM.render(, document.getElementById('root')) 

不能改成：
...
import app from './App'
ReactDOM.render(, document.getElementById('root'))

3. App.js导出的标签只能有一个容器，不能是多个容器，比如：

render() {
  return {
    

    

  }
}
上面代码会报错是因为导出了两个容器，div，ul

可以改成：

 render() {
  return {
    

        

        

    
  }
}

4. jsx注释

  {
    // Fragment标签是一个react组件，需要通过import {Fragment} from 'react'导入才能使用
  }

5. jsx语法中js和html标签的冲突

• class
  如果要声明标签中class属性，那么需要使用className代替
• for
  如果要声明label标签中的for属性，那么需要使用htmlFor代替
  这里htmlFor绑定了input的Id的话，点击Label会自动聚焦

6. 不对输入的html标签转义

react默认会对html标签进行转义，如果不想它转义，可以这样写：

就是在用于显示数据的标签中使用dangerouslySetInnerHTML={{__html:value}}的形式

三、jsx语法生成虚拟DOM的过程

参数列表： 标签名，属性，内容
React.createElement('div', {}, 'content') // 生成虚拟DOM
jsx -> createElement -> 虚拟DOM（js对象）-> 真实DOM