JSX基础（入门）
JSX介绍
概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构。
简单理解就是： JSX=javascript xml ，是 JavaScript 的语法扩展，只要把HTML代码写在JS里，那就是JSX。
作用：在React中创建HTML结构（页面UI结构）
优势：
- 采用类似于HTML的语法，降低学习成本，会HTML就会JSX
- 充分利用JS自身的可编程能力创建HTML结构
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
注意：JSX 并不是标准的 JS 语法，是 JS 的语法扩展，浏览器默认是不识别的，脚手架中内置的 babel/pulign-transform-react-jsx 包，用来解析该语法
JSX语法
1）JSX中使用js表达式： { JS 表达式 }
2）可使用的表达式：
字符串、数值、布尔值、null、undefined、object([]/{})
1 + 2、'abc'.split('')、['a', 'b'].join('-')
fn()
3）特别注意：if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 {} 中！！
JSX列表渲染
- 使用数组的map方法
// 数据列表
const arr = [
{id: 1, name: '张三'},
{id: 2, name: '李四'},
{id: 3, name: '王二'},
{id: 4, name: '麻子'}
]
function App() {
return (
<div className="App">
<ul>
{arr.map(item => <li>{item.name}</li>)}
</ul>
</div>
)
}
export default App
注意：需要为遍历项添加key属性
- key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用
- key 在当前列表中要唯一的字符串或者数值（String/Number）
- 如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值
- 如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值
JSX条件渲染
作用：根据是否满足条件生成HTML结构，比如Loading效果
实现：可以使用三元运算符或逻辑与(&&)运算符
// 布尔值
const flag = true
function App() {
return (
<div className="App">
{/* 条件渲染字符串 */}
{flag ? '前端真难' : '前端简单'}
{/* 条件渲染标签/组件 */}
{flag ? <span>this is span</span> : null}
</div>
)
}
export default App
JSX样式处理
1）行内样式：
function App() {
return (
<div className="App">
// 最外面{}是表达式,内部{}是对象,驼峰写法,用','隔开
<div style={{color: 'red', fontSize: '24px'}}>this is a div</div>
</div>
)
}
export default App
2）行内结合声明变量：（常用写法，推荐）
const styleObj = {color: red}
function App() {
return (
<div className="App">
<div style={styleObj}>this is a div</div>
</div>
)
}
export default App
3）使用className动态类名控制
/* app.css */
.title{
color : #E13500;
}
// 引入样式文件
import './app.css'
const showTitle = true
function App() {
return (
<div className="App">
// 表达式+三元 使用class会报错，必须使用className
<div className={showTitle ? 'title' : ''}>this is a div</div>
</div>
)
}
export default App
JSX注意事项
1）jsx必须有一个根节点，如果没有根节点则使用<></>（幽灵节点）代替根节点，相当于vue中的<template></template>标签
2）所有标签必须形成闭合，双标签闭合或者单标签闭合都可
3）JSX语法更贴近js语法，属性名采用驼峰命名法，例：className,htmlFor
4）JSX支持多行（换行），如需换行，使用（）包裹，防止bug出现
