react中 JSX介绍-基本使用

JSX是什么

JSX：是 JavaScript XML的缩写。

在 JS 代码中书写 XML 结构
- 注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。
React用它来创建 UI（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'))

优势

采用类似于 HTML 的语法，降低了学习成本，会 HTML 就会 JSX
充分利用 JS 自身的能力来创建 HTML 结构。比如，利用 JS 数组的 map 方法创建列表结构

JSX是如何工作的？

babel在线使用

jsx ---babel---> React.createELement

JSX的注意事项

内容

jsx必须要有一个根节点
属性名不能用js中的关键字。例如class, for
单标签要闭合
换行建议使用()包裹
老版本(16.8)先引入react才能使用jsx

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'))

属性名不能用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代码而不是字符串

作用：执行{}内部的代码，并输出结果。

嵌入表达式的位置

1 属性值

const logo = 'https://create-react-app.dev/img/logo.svg'
<img width="80" src={logo} />

2 内容

const name = '小芳'
<div>{name}</div>

单花括号中可以写什么？

可以写

表达式

定义：数据类型和运算符的组合（可以单独出现数据类型，也可以数据类型+运算符的组合）

特点：有值（或者能够计算出一个值）； 能被console.log()
其他的jsx表达式
注释

不可以写

对象
js语句：if 语句/ switch-case 语句/ 变量声明语句

示例

import React from 'react'
import ReactDOM from 'react-dom'const girl = {name: '小芳',age: 19,logo: 'https://create-react-app.dev/img/logo.svg',skills: ['唱歌', '收稻子']
}const f1 = () => {return <i>{girl.skills.join(',')}</i>
}
const baseInfo = (<div>姓名: {girl.name}妙龄: {girl.age}</div>
)const content = (<div style={{ padding: 50 }}><h1>jsx-表达式</h1>{/* 1. {} 可以用在内容上 */}{/* {}可以包其他的jsx */}{baseInfo}{/* {}可以包表达式 */}<p>爱好:{girl.skills}</p><p>字符串:{'abc'}</p><p>字符串:{'{'}</p><p>数组:{[1, 2, 3]}</p><p>数值:{100}</p><p>函数：{f1()}</p><p>算数表达式：100/2={100 / 2}</p><p>三元表达式：{girl.age < 28 ? '芳龄' : '年龄'} {girl.age}</p>{/* 2. {}可以用在属性值上 */}<p className={['class1', 'class2'].join(' ')}>类名组合</p><img width="80" src={girl.logo} />{/*下面是错误的示范不能输出对象，不能使用语句<p>{{ a: 1 }}</p><p>{var a =1 }</p> */}</div>
)
ReactDOM.render(content, document.getElementById('root'))

JSX-条件渲染

实现方式

if/else
三元运算符
逻辑与(&&)运算符

简单情况-用三元表达式

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-列表渲染

从后端取回来的数据保存在数组中，需要用列表展示。这里的数组如下：

const skills = [{ id: 1, name: 'html' }, { id: 2, name: 'css' }, { id: 3, name: 'js' }
]

我们要生成的dom结构如下：

<ul><ol>技能1：html</ol><ol>技能2：css</ol><ol>技能3：js</ol>
</ul>

笨方法

直接定义一个数组，每个元素都是一个jsx结构

const skills = [<ol>技能1:html</ol>, <ol>技能2: css</ol>, <ol>技能3: js</ol>]const content = <ul>{skills}</ul>ReactDOM.render(content, document.getElementById('root'))

用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

React 内部用来进行性能优化时使用的，在最终的HTML结构中是看不到的。

性能优化

例如，数据如下

const songs = [{ id: 1, name: '痴心绝对' }, { id: 2, name: '像我这样的人' }, { id: 3, name: '南山南' }
]

生成的dom

<ul><li>排名:1 - 歌名：痴心绝对</li><li>排名:2 - 歌名：想我这样的人</li><li>排名:3 - 歌名：南山南</li>
</ul>

如果添加一条数据，则视图也要随之更新，而更新的逻辑是：前三条正常保留，而重新添加第四条。

如何设置key

如果数据中有一个唯一的属性值，就可以使用这个属性来当做key

如果没有，就可以用索引值

JSX 样式处理

行内样式 - style

格式

<dom元素 style={ {css属性1：值1,css属性2：值2} }></dom元素>

要点：

为啥有两个{{ }}
1. 外层的{}表示要开始写js了
2. 内层的{}表示是一个对象
属性名是小驼峰格式 (background-color ===> backgroundColor)
属性值是字符串, 如果单位是px，可以简写数值

使用 className

要点

用className（不是class）定义类名
把样式写在额外的.css文件中，然后引入.css文件

import './index.css'// 类名
<h1 className="title">我是黑底红字的h1
</h1>

补充建立.css

.title{color: red;width: 200px;background-color: black;
}

小结

jsx中的样式：

行内： style={{对象，小驼峰}}
外部： className

JSX 整体总结

React 使用 JSX 来编写 UI（HTML）
React 完全利用 JS 语言自身的能力来增强 UI 的编写 - 能用 JS 来实现的功能绝不会增加一个新的 API
现在，就可以使用 React 来编写任意 UI 结构了