JSX 介绍
学习目标: 能够理解什么是 JSX,JSX 的底层是什么
概念: JSX 是 javaScriptXML(HTML) 的缩写,表示在 JS 代码中书写 HTML 结构
作用: 在 React 中创建 HTML 结构(页面 UI 结构)
优势:
1. 采用类似 HTML 的语法,降低学习成本,会 HTML 就会 JSX
2. 充分利用 JS 自生的可编程能力创建 HTML 结构
注意: JSX 并不是标准的 JS 语法,是 JS 的语法扩展,浏览器默认是不识别的,脚手架中内置的@babel/plugin-transform-react-jsx 包,用来解析该语法,将声明式的 JSX 解析为命令式的函数调用
JSX 中使用 js 表达式
学习目标: 能够在 JSX 中使用表达式
语法:
{JS 表达式}
js
function App() {
// 1.识别常规变量
const name = '跟着老惠学前端'
// 2.原生js方法调用
const age = () => {
return 25
}
//3.三元运算符
const flag = true
return (
<div className="App">
{name}
{age()}
{flag ? '真棒' : '真菜'}
</div>
)
}
export default App
可以使用的表达式
1.字符串、布尔值、数值、null、undefined、object([]/{})
2.算数运算(1+2)、字符串方法("abcde".split(''))、数组方法(['a','b'].join('-'))
3. fn()
特别注意
if 语句/switch-case 语句/变量声明语句,这些叫做语句,不是表达式,不能书写在{}中!!!
js
// 1.识别常规变量
const name = '跟着老惠学前端'
// 2.原生js方法调用
const age = () => {
return 25
}
//3.三元运算符
const flag = true
// 其他的自行尝试...
return (
<div className="App">
{name}
<br />
{age()}
<br />
{flag ? '真棒' : '真菜'}
<br />
</div>
)
JSX 列表渲染
学习目标: 能够在 JSX 中实现列表渲染
页面的构建离不开重复的列表结构,比如歌曲列表,商品列表等等,Vue 中用的式 v-for 做到这一点,react 中又该如何实现呢?
实现: 使用数组的 map 方法
案例:
js
// 技术方案:map 重复渲染的是哪个模板 就return那个
// 注意事项:遍历列表时同样需要一个类似number/string不可重复的key 提高diff性能
// key仅仅在内部使用,不会出现在真实的dom结构
const stu = [
{ id: 1, name: '小明', age: 18 },
{ id: 2, name: '李华', age: 19 },
{ id: 3, name: '小红', age: 17 },
{ id: 4, name: '小芳', age: 17 },
]
return (
<div className="App">
<ul>
{stu.map((item) => (
<li key={item.id}>
姓名:{item.name},年龄:{item.age}
</li>
))}
</ul>
</div>
)
运行结果:
JSX 条件渲染
学习目标: 能够在 JSX 中实现条件渲染
作用: 根据是否满足条件生成 HTML 结构,比如 Loading 效果
实现: 可以使用三元运算符
或者逻辑&&(与)运算符
实例:
js
function App() {
// 条件渲染
// 技术方案:1.三元表达式(常用) 2.逻辑&&(与)运算
const flag = true
return (
<div className="App">
1.三元表达式<br/>
(1).简单版:
{flag ? <span>this is span</span>:null}<br/>
(2).复杂版(可用小括号包裹起来):
{
flag ? (<div>
<span>this is span2</span>
</div>) : null
}
2.&& (前面为true则显示,false则不显示))<br/>
{true && <span>this is span</span>}
</div>
);
}
export default App;
运行结果:
JSX 模板精简原则
学习目标: 使模板中的逻辑跟简洁
实现: 复杂的多分枝的逻辑收敛为一个函数,通过一个专门的函数来写分支逻辑,模板中只负责调用
实例:
js
// 有一个状态type有1,2,3三种
// 1 展示 h1
// 2 展示 h2
// 3 展示 h3
const title = (type) =>{
if(type === 1){
return <h1>this is h1</h1>
}
else if(type === 2){
return <h2>this is h2</h2>
}
else if(type === 3){
return <h3>this is h3</h3>
}
}
return (
<div className="App">
{title(1)}
{title(3)}
{title(2)}
</div>
);
}
export default App;
运行结果:
JSX 样式处理
学习目标: 能够在 JSX 中实现 CSS 样式处理
1. 行内样式
实现: 在元素身上绑定一个 style 样式
- 行内样式 · style
js
function APP(){
return (
<div className="App">
<div style={{color:'red',fontSize:'10px'}}>this is div</div>
</div>
)
}
export default App
- 行内样式·style·优化写法
js
function App() {
const divStyle1 = {
color:'blue',
fontSize:'20px'
}
return (
<div className="App">
<div style={divStyle1}>this is div</div>
</div>
)
}
export default App;
2. 类名样式
实现: 在元素身上绑定一个 className 属性即可
1. 创建一个 css 样式表文件 app.css
css
.colors {
color: peru;
font-size: 40px;
}
2. JSX 中引入 css 文件
js
// 使用import引入样式表文件
import './app.css'
3. 在元素上用 className 属性绑定 class 样式
js
<div className='colors'>类名样式</div>
运行结果:
JSX 动态类名控制
学习目标: 根据需求判断是否显示某个类名的样式
实现: 使用三元表达式或逻辑&&运算
js
import './app.css';
function App() {
const color1 = true
const color2 = true
return (
<div className="App">
1. 三元:
<div className={color1?'colors':''}>类名样式</div>
2. &&(与)
<div className={color2 && 'colors'}>类名样式</div>
</div>
)
}
export default App;
运行结果:
JSX 注意事项
学习目标: 掌握 JSX 实际开发过程中的一些注意事项
1. JSX 必须具有一个根节点,如果没有根节点可以使用<></>(幽灵节点)代替根节点将所有元素包裹起来
js
function App() {
return (
<>
<div className="App">1</div>
<div className={htmlFor(i in 10)}>2</div>
</>
)
}
export default App;
2. 所有标签必须形成闭合(
),成对闭合或者自闭( )和都可以
3. JSX 中的语法更加贴近 JS 语法,属性名采用驼峰命名法 class -> className; for -> htmlFor
4. JSX 支持多行(换行),如果需要换行,需使用 ()
包裹,防止出现 Bug