JSX基础-概念和本质

91 阅读1分钟
什么是JSX

概念:JSX是JavaScript和XML(HTML)的缩写,表示在JS代码中编写HTML模板结构,它是React中编写UI模板的方式

image.png

优势:

  1. HTML的声明式模板写法
  2. JS的可编程能力
JSX的本质

JSX并不是标准的js语法,它是JS的语法扩展,浏览器本身不能识别,需要通过解析工具做解析之后才能在浏览器中运行

image.png

Babel官网:www.babeljs.cn/

JSX中使用JS表达式

在JSX中,可以通过大括号语法{}识别JavaStript中的表达式,比如常见的变量、函数调用、方法调用等等

  1. 使用引号传递字符串
  2. 使用JavaScript变量
  3. 函数调用和方法调用
  4. 使用JavaScript对象

注意:if语句、switch语句、变量声明属于语句,不是表达式,不能出现在{}中