JSX是什么
JSX：是 JavaScript XML的缩写
-
在 JS 代码中书写 XML 结构
-
注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。
-
-
React用它来创建 UI（HTML）结构
理解：我们之前用html写页面，现在是用jsx来写页面
jsx示例
优势
-
采用类似于 HTML 的语法，降低了学习成本，会 HTML 就会 JSX
-
充分利用 JS 自身的能力来创建 HTML 结构。比如，利用 JS 数组的 map 方法创建列表结构
JSX是如何工作的？
jsx ---babel---> React.createELement
JSX的注意事项
掌握JSX的5个注意事项
jsx必须要有一个根节点
属性名不能用js中的关键字。例如class, for
单标签要闭合
换行建议使用( )包裹
老版本(16.8)先引入react才能使用jsx
jsx必须要有一个根节点
虚拟根节点
有两种格式
格式1：<> xxx </>
格式2：<React.Fragment> xxx </React.Fragment>
属性名不能用js中的关键字
例如class, for
class -> className
for ->htmlFor
单标签要闭合
<input>---><input />
老版本(16.8)先引入react才能使用jsx
理解引入react的作用（提供createElement的功能）
老版本中不引入就会报错React must be in scope when using JSX
换行建议使用()包裹
const content = (
<div>
<h1>xxx</h1>
</div>
)
JSX-嵌入表达式
嵌入表达式的格式
{ JS 表达式 }
例如：
import ReactDOM from 'react-dom'
const num = Math.random()
const title = (<div>
随机值：{ num }
</div>)
ReactDOM.render(title, document.querySelector('#root'))大括号是一种特殊的语法，让 JSX 解析器知道它需要将它们之间的内容解释为 JavaScript代码 而不是字符串
作用：执行{}内部的代码，并输出结果。
嵌入表达式的位置
属性值
const logo = 'https://create-react-app.dev/img/logo.svg'
<img width="80" src={logo} />
内容
const name = '小芳'
<div>{name}</div>
单花括号中可以写什么？
可以写
-
表达式
定义：数据类型和运算符的组合（可以单独出现数据类型，也可以数据类型+运算符的组合）
特点：有值（或者能够计算出一个值）； 能被console.log()
-
其他的jsx表达式
-
注释
不可以写
-
对象
-
js语句：if 语句/ switch-case 语句/ 变量声明语句
JSX-条件渲染
实现方式
if/else三元运算符
逻辑与(&&)运算符
switch case
简单情况-用三元表达式
const flag = 0
const content = (<div>{flag ? '达成' : '没有达成'}</div>)
简单情况-用逻辑与
const isLogin = true
const content = (<div>{ isLogin && '您登录了'}</div>)
复杂情况-使用额外的函数
const loadData = (isLoading) => {
if (isLoading) {
return <div>数据加载中，请稍后...</div>
} else {
return <div>数据加载完成，此处显示加载后的数据</div>
}
}
const content = <div>{loadData(true)}</div>
JSX-列表渲染
用map
完整格式
// 完整格式
const t = skills.map(function(item) {
return <ol>技能{item.id}: {item.name}</ol>
})
const list = <ul>{t}</ul>简写格式
const list = (
<ul>
{skills.map(item => <ol>技能{item.id}: {item.name}</ol>)}
</ul>
)列表渲染中的key
目标
了解key的作用，能正确给循环渲染项添加key
了解key的作用
React 内部用来进行性能优化时使用的，在最终的HTML结构中是看不到的。
如何设置key
如果数据中有一个唯一的属性值，就可以使用这个属性来当做key
如果没有，就可以用索引值