React-JSX基础

什么是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判断语句来实现复杂条件的渲染