react中JSX的介绍

一，首先，createElement的效率太低了，太繁琐，不够直观
所以就引出了JSX，jsx是什么？
JSX：是 JavaScript XML的缩写
在 JS 代码中书写 XML 结构，JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架内置了babel编译包，React用它来创建 UI（HTML）结构
简单理解：
我们之前用html写页面，现在是用jsx来写页面

代码：

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// jsx创建元素
const list = <ul><li>html</li><li>js</li><li>css</li><ul>

// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))

二，JSX的注意事项

1.jsx必须要有一个根节点
虚拟根节点，有两种格式：
格式1：<> xxx </>

import ReactDOM from 'react-dom'

const title = <> <h1>Hello React</h1><p>p标签</p> </>

ReactDOM.render(title, document.querySelector('#root'))

格式2：<React.Fragment> xxx </React.Fragment>

import ReactDOM from 'react-dom'

const title = <React.Fragment> <h1>Hello React</h1><p>p标签</p> </React.Fragment>>

ReactDOM.render(title, document.querySelector('#root'))

2.属性名不能用js中的关键字。例如class, for
3.单标签要闭合
4.换行建议使用( )包裹
5.老版本(16.8)先引入react才能使用jsx

三，JSX-嵌入表达式
1.格式：{ JS 表达式 }
代码：

import ReactDOM from 'react-dom'

const num = Math.random()
const title = (<div>
               		随机值：{ num }
               </div>)

ReactDOM.render(title, document.querySelector('#root'))

2.花括号{} 中间可以写什么？
表达式
其他的jsx表达式
注释
数组

不可以写？
对象
js语句：if 语句/ switch-case 语句/ 变量声明语句

四，JSX-条件渲染

【if/else，三元运算符，逻辑与(&&)运算符，switch case 都可以进行渲染】

代码示例：

1.用三元表达式

const flag = 0
const content = (<div>{flag ? '达成' : '没有达成'}</div>)

2.用逻辑与（逻辑或一样用）

const isLogin = true
const content = (<div>{ isLogin && '您登录了'}</div>)

3.使用额外的函数

const loadData = (isLoading) => {
  if (isLoading) {
    return <div>数据加载中，请稍后...</div> 
  } else {
    return <div>数据加载完成，此处显示加载后的数据</div>
  }
}
const content = <div>{loadData(true)}</div>

4.使用map

import React from 'react' // react 提供最核心的react组件功能
import ReactDOM from 'react-dom' //  配合react 把react渲染到dom

// 创建元素
const list = [
  { id: 1, name: '张国荣', salary: 11000 },
  { id: 2, name: '周杰伦', salary: 15000 }
]
const app = (
  <ul>
    {list.map((item) => (
      <li key={item.id}>
        <h3>姓名：{item.name}</h3>
        <p>工资：{item.salary}</p>
      </li>
    ))}
  </ul>
)

// 渲染react元素
ReactDOM.render(app, document.getElementById('root'))