JSX看着一篇足以入门

看着一篇足以入门"/>

JSX看着一篇足以入门

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 表达式}

function App() {// 1.识别常规变量const name = '跟着老惠学前端'// 2.原生js方法调用const age = () => {return 25}//3.三元运算符const flag = truereturn (<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 语句/变量声明语句，这些叫做语句，不是表达式，不能书写在{}中！！！

// 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 方法
案例:

// 技术方案：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 效果
实现： 可以使用三元运算符或者逻辑&&（与）运算符
实例：

function App() {// 条件渲染// 技术方案：1.三元表达式（常用） 2.逻辑&&（与）运算const flag = truereturn (<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 模板精简原则

学习目标： 使模板中的逻辑跟简洁
实现： 复杂的多分枝的逻辑收敛为一个函数，通过一个专门的函数来写分支逻辑，模板中只负责调用
实例：

// 有一个状态type有1，2，3三种
// 1 展示 h1
// 2 展示 h2
// 3 展示 h3const 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

function APP(){return (<div className="App"><div style={{color:'red',fontSize:'10px'}}>this is div</div></div>)
}
export default App

  - 行内样式·style·优化写法

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

.colors {color: peru;font-size: 40px;
}

  2. JSX 中引入 css 文件

// 使用import引入样式表文件
import './app.css'

  3. 在元素上用 className 属性绑定 class 样式

    <div className='colors'>类名样式</div>

运行结果：

JSX 动态类名控制

学习目标： 根据需求判断是否显示某个类名的样式
实现： 使用三元表达式或逻辑&&运算

import './app.css';
function App() {const color1 = trueconst color2 = truereturn (<div className="App">1. 三元：<div className={color1?'colors':''}>类名样式</div>2. &&（与）<div className={color2 && 'colors'}>类名样式</div></div>)
}export default App;

运行结果：

JSX 注意事项

学习目标： 掌握 JSX 实际开发过程中的一些注意事项
  1. JSX 必须具有一个根节点，如果没有根节点可以使用<></>(幽灵节点)代替根节点将所有元素包裹起来

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