JSX基础
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