什么是JSX
概念:JSX是JavaScript和XML(HTML)的缩写,表示在JS代码中编写HTML模板结构,它是React中编写UI模板的方式
优势:1.HTML的声明式模板写法 2.JS的可编程能力
JSX的本质
JSX并不是标准的JS语法,它是JS的语法拓展,浏览器本身不能识别,需要通过解析工具做解析之后才能在浏览器中运行
编译网站:Babel · Babel
点击右上角的"Try it out"
要把最左侧的react勾选上,左侧填写JSX代码,右侧就是浏览器编译后的代码
高频场景
JSX中使用JS表达式
在JSX中可以通过大括号语法{}识别Javascript中的表达式,比如常见的变量、函数调用、方法调用等等
1.使用引号传递字符串
{字符串}
2.使用JavaScript变量
{JS变量名}
3.函数调用和方法调用
{函数名()}
4.使用JavaScript对象
注意:if语句、switch语句、变量声明属于语句,不是表达式,不能出现在{}中
JSX中实现列表渲染
语法:在JSX中可以使用原生JS中的map方法遍历渲染列表
注意事项:加上一个独一无二的key值(类型可以是字符串或者number)
key的作用:React框架内部使用,提升更新性能
JSX中实现条件渲染
语法:在React中,可以通过逻辑与运算符&&、三元表达式(?:)实现基础的条件渲染
JSX中实现复杂条件渲染
自定义函数+if判断语句来实现复杂条件的渲染