jsx详解

简介: jsx详解

1、全称:javaScript XML

2、react定义的一种类似于XML的JS扩展语法:js + XML

更高效创建虚拟DOM


3 语法规则:


定义虚拟DOM时,不要写引号。

标签中混入JS表达式时要用{}

样式的类名指定不要用class,要用className。

style写法 style={{color:‘white’,fontSize:‘29px’}}(外边的大阔号表示里面放的js表达式,里边的大阔号表示一个对象)

只有一个根标签

标签必须闭合

标签首字符

若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错

若大写字母开头,react就去渲染相应的的组件,若组件没有定义,则报错。


【补充】


XML早期用于存储和传输数据,后来被JSON取代

原因是:XML存储的信息会附带标签,JSON就不用,比较轻便,具有parse和stringify两个属性,转化数据类型很方便

关于虚拟DOM:

1、本质是Object类型的对象(一般对象)

2、虚拟DOM比较"轻",真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性。

3、虚拟DOM最终会被React转化为真实的DOM,呈现在页面上


区分【js表达式】和【js语句(代码)】


1,表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方

a a+b demo(1) arr.map function aaa(){}

2 语句

if(){} swich(){} for(){}
相关文章
|
7天前
|
XML 前端开发 JavaScript
React——JSX语法【三】
React——JSX语法【三】
13 0
|
3月前
|
XML 前端开发 JavaScript
react中JSX的详解
react中JSX的详解
33 2
|
3月前
|
JavaScript
【vue】无法使用 JSX,除非提供了 “--jsx“ 标志
【vue】无法使用 JSX,除非提供了 “--jsx“ 标志
31 0
【vue】无法使用 JSX,除非提供了 “--jsx“ 标志
|
3月前
|
前端开发 JavaScript
什么是jsx
什么是jsx
22 0
|
3月前
|
前端开发 JavaScript 安全
react为什么要使用JSX
react为什么要使用JSX
61 1
|
XML JavaScript 前端开发
react总结之jsx是什么,jsx语法规则
react总结之jsx是什么,jsx语法规则
|
8月前
|
JavaScript 前端开发
在vue中使用jsx
在vue中使用jsx
64 2
|
9月前
|
前端开发 JavaScript
|
9月前
|
JavaScript 前端开发
vue jsx
vue jsx
|
9月前
|
JavaScript 前端开发
vue jsx
vue jsx