概念：JSX是JavaScript和XML的缩写，表示在JS代码中编写HTML模板结构，它是React中编写UI模板结构，它是React中编写UI模板的方式。
使用JSX的优势：
- HTML的声明式模板写法
- JS的可编程能力
JSX的本质
JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行
JSX中使用JS表达式
在JSX中可以通过大括号语法{}识别JavaScript中的表达式，比如常见的变量、函数调用等等(插值表达式
- 使用引号传递字符串
- 使用JavaScript变量
- 函数调用和方法调用
- 使用JavaScript对象
JavaScript
//根组件：被引入到index.js，然后渲染到public里面的index html就可以了
const message = "v w 50 kfc crazy Thursday";
function abs(){
return 123;
}
function App() {
return (
<div className="App">
this is App
{/* 使用引号传递字符串 */}
{"this is message"}
{/* 使用JS变量 */}
{message}
{/* 函数调用 */}
{abs()}
{/* 方法调用 */}
{Date.now()}
{/* 使用js对象 */}
<div style={{color:"pink"}}>v我50</div>
</div>
);
}
JSX实现列表渲染
语法：在JSX中可以使用原生JS中的map方法遍历渲染列表
JavaScript
//根组件：被引入到index.js，然后渲染到public里面的index html就可以了
const list = [
{name:'张三',age:18},
{name:'李四',age:20},
{name:'王五',age:22},
]
function abs(){
return 123;
}
function App() {
return (
<div className="App">
<ul>
{/* 只要进行遍历渲染，就需要一个key绑定，提升列表更新性能*/}
{list.map(item=><li key={item.age}>{item.name}---{item.age}</li>)}
</ul>
</div>
);
}
export default App;JSX实现条件渲染
语法：在React中，可以通过逻辑与运算符 &&和三元表达式(?:)实现基础的条件渲染
JavaScript
const isLogin = false;
function App() {
return (
<div className="App">
{/* 逻辑与 && */}
{isLogin && <h2>欢迎回来</h2>}
{/* 三元表达式 */}
{isLogin? <h2>欢迎回来</h2>:<h2>请登录</h2>}
</div>
);
}
需求：列表中需要根据文章状态适配三种情况，单图、三图和无图三种模式
解决方案：自定义函数+if判断语句或switch语句
JavaScript
// 定义文章类型
const atyle = 10 //0,1,3
//定义核心函数(根据文章类型返回不同的JSX模板)
function gettemplate(){
switch(atyle){
case 0:
return <h2>无图文章</h2>
case 1:
return <h2>有图文章</h2>
case 3:
return <h2>三图文章</h2>
default:
return <h2>文章类型未知</h2>
}
}
function App() {
return (
<div className="App">
{gettemplate()}
</div>
);
}