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(){}
相关文章
|
8天前
|
XML 前端开发 JavaScript
react之了解jsx
react之了解jsx
|
25天前
|
前端开发 JavaScript
使用 JSX
JSX 是 React 中用于构建用户界面的语法扩展,外观类似 HTML。通过 `<div>` 包裹多个 HTML 标签,并可为元素添加如 `data-` 前缀的自定义属性。示例代码展示了如何在 React 中使用 JSX 创建包含标题和段落的基本页面结构。
|
3月前
|
XML 前端开发 JavaScript
JSX是什么
【8月更文挑战第28天】JSX是什么
131 63
|
25天前
|
XML 前端开发 JavaScript
React JSX
React 使用 JSX(一种类似 XML 的 JavaScript 语法扩展)来替代传统 JavaScript 编写 UI。JSX 使代码更简洁、执行更快且类型安全。例如,`<h1>Hello, world!</h1>` 实际上是创建一个 React 元素,通过 `ReactDOM.render()` 渲染到 DOM。注意,JSX 中使用 `className` 替代 HTML 的 `class` 属性。
|
3月前
|
XML 前端开发 JavaScript
React——JSX语法【三】
React——JSX语法【三】
31 0
|
6月前
|
XML 前端开发 JavaScript
react中JSX的详解
react中JSX的详解
64 2
|
6月前
|
前端开发 JavaScript
什么是jsx
什么是jsx
30 0
|
6月前
|
前端开发 JavaScript 安全
react为什么要使用JSX
react为什么要使用JSX
85 1
|
XML JavaScript 前端开发
react总结之jsx是什么,jsx语法规则
react总结之jsx是什么,jsx语法规则
|
6月前
|
前端开发 JavaScript
【React学习】—jsx语法规则(三)
【React学习】—jsx语法规则(三)