1. JSX介绍
概念:JSX是 JavaScript XML(HTML)的缩写,表示在 JS 代码中书写 HTML 结构
作用:在React中创建HTML结构(页面UI结构)
优势:
- 采用类似于HTML的语法,降低学习成本,会HTML就会JSX
- 充分利用JS自身的可编程能力创建HTML结构
注意:JSX 并不是标准的 JS 语法,是 JS 的语法扩展,浏览器默认是不识别的,脚手架中内置的 @babel/plugin-transform-react-jsx 包,用来解析该语法
2. JSX中使用js表达式
语法:{ JS 表达式 }
const name = ‘名字’
你好,我叫{name}
//你好,我叫Judian
可以使用的表达式
- 字符串、数值、布尔值、null、undefined、object( [] / {} )
- 1 + 2、‘abc’.split(‘’)、[‘a’, ‘b’].join(‘-’)
- fn()
特别注意
if 语句/ switch-case 语句/ 变量声明语句,这些叫做语句,不是表达式,不能出现在 {} 中!!
3. JSX列表渲染
页面的构建离不开重复的列表结构,比如歌曲列表,商品列表等,我们知道vue中用的是v-for,react这边如何实现呢?
实现:使用数组的map 方法
案例:
// 定义个列表
constsongs = [
{ id: 1, name: '痴心绝对'},
{ id: 2, name: '像我这样的人'},
{ id: 3, name: '南山南'}
]
functionApp() {
return(
<divclassName="App"><ul>{
songs.map(item => <li>{item.name}</li>)
}
</ul></div>)
}
注意点:需要为遍历项添加 key 属性
- key 在 HTML 结构中是看不到的,是 React 内部用来进行性能优化时使用
- key 在当前列表中要唯一的字符串或者数值(String/Number)
- 如果列表中有像 id 这种的唯一值,就用 id 来作为 key 值
- 如果列表中没有像 id 这种的唯一值,就可以使用 index(下标)来作为 key 值
4. JSX条件渲染
作用:根据是否满足条件生成HTML结构,比如Loading效果
实现:可以使用 三元运算符 或 逻辑与(&&)运算符
案例:
// 来个布尔值
constflag = truefunctionApp() {
return(
<divclassName="App">{/* 条件渲染字符串 */}
{flag ? 'react真有趣' : 'vue真有趣'}
{/* 条件渲染标签/组件 */}
{flag ? <span>this is span</span>: null}
</div>)
}
5. JSX样式处理
• 行内样式 - style
functionApp() {
return(
<divclassName="App"><divstyle={{color:'red' }}>this is a div</div></div>)
}
exportdefaultApp
• 行内样式 - style - 更优写法
conststyleObj = {
color:red
}
functionApp() {
return(
<divclassName="App"><divstyle={styleObj}>this is a div</div></div>)
}
• 类名 - className(推荐)
app.css
.title{
font-size: 30px;
color: blue;
}
app.js
import'./app.css'functionApp() {
return(
<divclassName="App"><divclassName='title'>this is a div</div></div>)
}
• 类名 - className - 动态类名控制
import'./app.css'constshowTitle = truefunctionApp() {
return(
<divclassName="App"><divclassName={showTitle? 'title' :''}>this is a div</div></div>)
}
6. JSX注意事项
- JSX必须有一个根节点,如果没有根节点,可以使用<></>(幽灵节点)替代
- 所有标签必须形成闭合,成对闭合或者自闭合都可以
- JSX中的语法更加贴近JS语法,属性名采用驼峰命名法 class -> className for -> htmlFor
- JSX支持多行(换行),如果需要换行,需使用() 包裹,防止bug出现
格式化配置
- 安装vsCode prettier插件
- 修改配置文件 setting.json