写实际上是javascript的扩展既有javascript的语法结构又有XML的结构

jsx必须要有一个根节点

如果不想产生无用的根标签但是还要遵守JSX的语法的要求可以使用如下两种方式

JSX必须要有一个根节点而且编译之后在浏览器中不产生根标签jsx可以使用如下两种方式完成

const

srchttps://api.java.crmeb.net/crmebimage/store/2020/08/15/adae23e354114cd5bd8f3cae740741c23opxeh8kw2.jpg//img或者

img

srchttps://api.java.crmeb.net/crmebimage/store/2020/08/15/adae23e354114cd5bd8f3cae740741c23opxeh8kw2.jpg/

采用驼峰式命名法

在JSX中不管是动态元素的渲染还是属性的渲染全部通过{}来进行渲染的

let

avatarhttps://www.baidu.com/img/flexible/logo/pc/result.png

const

template(h1个人简介/h1div姓名:{name}/divdiv年龄:{age}/divdiv工作:{job}/divdiv爱好:{hobby}/divdivimg

div虚岁:{age1}/div

getBirthdayidcardidcard.slice(6,10)-idcard.slice(10,12)-idcard.slice(12,14)

const

template(h1个人简介/h1div姓名:{name}/divdiv年龄:{age}/divdiv工作:{job}/divdiv爱好:{hobby}/divdivimg

src{avatar}/img/divdiv是否成年:{age18?成年:未成年}/divdiv虚岁:{age1}/divdiv生日:{getBirthday(idcard)}/div/)

对象表达式

introduceuser我叫${user.name},今年${user.age}岁,职业是${user.job}

const

template(div姓名:{user.name}/divdiv年龄:{user.age}/divdiv职业:{user.job}/divdiv介绍:{introduce(user)}/div

3、列表渲染

classNameorder-center-headerdiv订单中心/divdiv查看全部/div/divdiv

classNameorder-center-body{orderList.map(item

div

item.icon}/idiv{item.title}/div/div)}/div/div/div/Fragment)}

1、类样式

style{{key:value,key:value}}/div

const

#eee,padding:10px,backgroundColor:#ccc,color:#fff}

注意样式名采用驼峰式命名法如果有多个单词每个单词的首字母必须要大写才可以。

三、引入本地图片

如果在一个组件中要引入图片这个图片可以来自本地也可以来自网络来自本地图片的处理

import

logorequire(./assets/logo.png)return

Fragmentimg

注意如果图片是网络图片直接写网址就可以了无需进行其他处理如果是网络图片有的时候图片地址是正确的但是图片却出不来可能是防盗链问题。

四、虚拟DOM和jsx底层渲染机制

我们通过React对象中提供的createElement函数完成了虚拟DOM的创建而后再通过ReactDOM的render函数将其渲染到页面的指定元素中这种方式创建虚拟DOM的方式相对而言比较麻烦,而且循环创建多个元素的时候还需要指定key,否则会报错。

import

ReactDOM.createRoot(document.getElementById(root));

const

helloRectEleReact.createElement(h1,null,Hello

React);

helloWoniuEleReact.createElement(h1,null,Hello

Woniuxy);

helloGilesEleReact.createElement(h1,null,Hello

Giles);

containerElementReact.createElement(div,null,

[helloRectEle,helloWoniuEle,helloGilesEle]);

Warning:

https://reactjs.org/link/warning-keys

for

这是因为在循环生成多个组件的时候没有给组件加上key引起具体修改如下

import

ReactDOM.createRoot(document.getElementById(root));

const

helloRectEleReact.createElement(h1,{key:0},Hello

React);

helloWoniuEleReact.createElement(h1,{key:1},Hello

Woniuxy);

helloGilesEleReact.createElement(h1,{key:2},Hello

Giles);

containerElementReact.createElement(div,null,

[helloRectEle,helloWoniuEle,helloGilesEle]);

key是虚拟DOM对象的标识在更新时标识为keys起着极其重要的作

⽤即当状态中的数据发⽣变化时react会根据新数据⽣成新的虚拟

DOM随后React进⾏新旧虚拟DOM的key的对⽐如果存在相同的

实DOM并且替换⻚⾯之前的真实DOM若不存在key则根据数据创

建新的真实DOM随后进⾏⻚⾯渲染减少不必要的元素重渲染提升性能

1.2、使用JSX创建虚拟DOM

对于初学者来说通过createElement方法构建用户界面属实不太友好但是在React内部确实需要通过这种方式创建虚拟DOM对象如何解决这个矛盾呢

React为createElement方法创造了替代语法让开发者可以通过类似于HTML的语法创建用户界面在构建应用时再使用babel将这种替换语法转换回createElement方法的调用代码下面就是使用JSX方式创建下面我们先来通过一段代码来看一下后续我们再具体详细讲解JSX的语法

const

Giles/h1/div)ReactDOM.render(conatiner,document.getElementById(root));

实际上JSX的方式最终还是会转成第一种使用React.createElement()函数创建的方式这里只是为了方便使用了JSX,我们编写的JSX通过babel来转换的下面我们可以在官网上来做这个实验

Babel

这里提供了将JSX的方式最终转成createElement的方式

在body中定义一个div容器

srchttps://unpkg.com/react18/umd/react.development.js

srchttps://unpkg.com/react-dom18/umd/react-dom.development.js

src./node_modules/babel-standalone/babel.js/script

注意这里要引入babel.js对JSX进行转换首先引入之前可以通过yarn

add

divElementdivh1个人介绍/h1tabletrtd姓名:/tdtd张三/td/trtrtd年龄:/tdtd33/td/trtrtd性别:/tdtd男/td/tr/table/div

/script

rootReactDOM.createRoot(document.getElementById(app))root.render(divElement)

基于babel-preset-react-app把JSX编译为React.createElement(...)这种格式

Babel

下面介绍一下React.createElement(ele,props,...children)

参数说明

props:元素的属性集合(对象)注意如果没有设置过任何的属性则此值是null

DOM虚拟DOM对象格式如下