React笔记（二）JSX

一、JSX

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

1、JSX的规则要求

  • jsx必须要有一个根节点

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

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

  • 使用空标签的方式来完成

const content=<><h1>Hello Giles</h1><h1>Hello Woniuxy</h1></>

  • Fragment组件来完成

const content=<Fragment><h1>Hello Giles</h1><h1>Hello Woniuxy</h1></Fragment>

  • JSX中的标签如果没有子元素，那么也要使用</>来作为结束

<img src='https://api.java.crmeb.net/crmebimage/store/2020/08/15/adae23e354114cd5bd8f3cae740741c23opxeh8kw2.jpg'/></img>或者
<img src='https://api.java.crmeb.net/crmebimage/store/2020/08/15/adae23e354114cd5bd8f3cae740741c23opxeh8kw2.jpg'/>
  • 采用驼峰式命名法

    • class---->className

    • for--->htmlFor

    • tabindex--->tabIndex

  • 为了避免分号陷阱，建议大家必须使用()将元素括起来
const content=(<></>)

2、JSX的表达式

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

let name="Giles"
let age=38
let job="teacher"
let hobby=['play basketball','play football']
let avatar="https://www.baidu.com/img/flexible/logo/pc/result.png"
const template=(<><h1>个人简介</h1><div>姓名:{name}</div><div>年龄:{age}</div><div>工作:{job}</div><div>爱好:{hobby}</div><div><img src={avatar}></img></div></>)

  • jsx的算数表达式和三元表达式

<div>是否成年:{age>=18?'成年':'未成年'}</div>
<div>虚岁:{age+1}</div>

  • 函数表达式

let idcard="610122198404084030"
const getBirthday=idcard=>idcard.slice(6,10)+"-"+idcard.slice(10,12)+"-"+idcard.slice(12,14)
const template=(<><h1>个人简介</h1><div>姓名:{name}</div><div>年龄:{age}</div><div>工作:{job}</div><div>爱好:{hobby}</div><div><img src={avatar}></img></div><div>是否成年:{age>=18?'成年':'未成年'}</div><div>虚岁:{age+1}</div><div>生日:{getBirthday(idcard)}</div></>)

  • 对象表达式

let user={name:'刘备',age:39,job:'皇帝'
}
const introduce=user=>`我叫${user.name},今年${user.age}岁,职业是${user.job}`
const template=(<><div>姓名:{user.name}</div><div>年龄:{user.age}</div><div>职业:{user.job}</div><div>介绍:{introduce(user)}</div>
</>)

3、列表渲染

import React, { Component, Fragment } from 'react'
import '@/App.css'
export default class App extends Component {render() {const orderList = [{title: '待付款',icon: 'icon-daifukuan'},{title: '待发货',icon: 'icon-daifahuo'},{title: '待收货',icon: 'icon-daishouhuo'},{title: '待评价',icon: 'icon-daipingjia'},{title: '售后/退款',icon: 'icon-daifukuan'}]return (<Fragment><div className='mime'><div className='order-center'><div className='order-center-header'><div>订单中心</div><div>查看全部</div></div><div className='order-center-body'>{orderList.map(item => <div className='order-item'><i className={'iconfont '+item.icon}></i><div>{item.title}</div></div>)}</div></div></div></Fragment>)}
}

二、react的样式的处理

针对于行内样式和类样式的处理如下

1、类样式

使用className="类样式名"方式来进行类样式的设置

  • 在src/assets/css/index.css

.mtable{border-collapse: collapse;width: 900px;
}
.mtable td{border:1px solid #ccc;padding:10px;text-align: center;
}

  • 在src/index.js中引入

import './assets/css/index.css'

2、行内样式

语法

<div style={{key:value,key:value}}></div>

当然也可以将对象提取出来

const headStyle={border:'1px solid #eee',padding:'10px',backgroundColor:'#ccc',color:'#fff'}
<th style={headStyle}>序号</th>

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

三、引入本地图片

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

如果要引入本地中图片，常用的方法有两种

  • 通过ES6的import方式进行导入

import logo from './assets/logo.png'
export default class App extends Component {render() {return  <Fragment><img src={logo}></img></Fragment>}
}

  • 通过node.js的require方法引入

import logo from './assets/logo.png'
export default class App extends Component {render() {const logo=require('./assets/logo.png')return  <Fragment><img src={logo}></img></Fragment>}
}

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

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

1、什么是虚拟DOM

在 React 中，每个 DOM 对象都有一个对应的 Virtual DOM 对象，它是 DOM 对象的 JavaScript 对象表现形式，其实就是使用 JavaScript 对象来描述 DOM 对象信息，比如 DOM 对象的类型是什么，它身上有哪些属性，它拥有哪些子元素。

下面是一个DOM对象

<div className="container"><h3>Hello React</h3><p>React is great </p>
</div>

对应的虚拟DOM，如下

{type: "div",props: { className: "container" },children: [{type: "h3",props: null,children: [{type: "text",props: {textContent: "Hello React"}}]},{type: "p",props: null,children: [{type: "text",props: {textContent: "React is great"}}]}]
}

  • 虚拟DOM如何提升效率的

精准找出发生变化的 DOM 对象，只更新发生变化的部分。

在 React 第一次创建 DOM 对象后，会为每个 DOM 对象创建其对应的 Virtual DOM 对象，在 DOM 对象发生更新之前，React 会先更新所有的 Virtual DOM 对象，然后 React 会将更新后的 Virtual DOM 和 更新前的 Virtual DOM 进行比较，从而找出发生变化的部分，React 会将发生变化的部分更新到真实的 DOM 对象中，React 仅更新必要更新的部分。

2、创建虚拟DOM的方式

2.1、使用createElement创建虚拟DOM

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

import React from 'react';
import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));
const helloRectEle=React.createElement("h1",null,"Hello React");
const helloWoniuEle=React.createElement("h1",null,"Hello Woniuxy");
const helloGilesEle=React.createElement("h1",null,"Hello Giles");
const containerElement=React.createElement("div",null,  [helloRectEle,helloWoniuEle,helloGilesEle]);
root.render(containerElement);

如上页面显示是正常的，但是控制台会报如下错误

Warning: Each child in a list should have a unique "key" prop.Check the top-level render call using <div>. See https://reactjs.org/link/warning-keys for more information.at h1

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

import React from 'react';
import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));
const helloRectEle=React.createElement("h1",{key:0},"Hello React");
const helloWoniuEle=React.createElement("h1",{key:1},"Hello Woniuxy");
const helloGilesEle=React.createElement("h1",{key:2},"Hello Giles");
const containerElement=React.createElement("div",null,  [helloRectEle,helloWoniuEle,helloGilesEle]);
root.render(containerElement);

Key的作⽤： key是虚拟DOM对象的标识，在更新时标识为keys起着极其重要的作 ⽤：即当状态中的数据发⽣变化时，react会根据新数据⽣成新的虚拟 DOM，随后React进⾏新旧虚拟DOM的key的对⽐，如果存在相同的 key，若内容没变，则沿⽤之前的真实DOM，若数据变了，则⽣成新的真 实DOM，并且替换⻚⾯之前的真实DOM，若不存在key，则根据数据创 建新的真实DOM，随后进⾏⻚⾯渲染，减少不必要的元素重渲染，提升性能

1.2、使用JSX创建虚拟DOM

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

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

 const conatiner=(<div><h1>Hello React</h1><h1>Hello Woniuxy</h1><h1>Hello Giles</h1></div>)ReactDOM.render(conatiner,document.getElementById('root'));

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

下面是babel的官网：babel官方网站： Babel 中文文档 | Babel中文网 · Babel 中文文档 | Babel中文网

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

使用JSX的方式创建虚拟DOM的步骤

  • 在body中定义一个div容器

  • 导入包

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script><script src="./node_modules/babel-standalone/babel.js"></script>

注意：这里要引入babel.js对JSX进行转换，首先引入之前可以通过yarn add babel-standalone方式来下载babel

  • 编写jsx

<script type="text/babel">const divElement=<div><h1>个人介绍</h1><table><tr><td>姓名:</td><td>张三</td></tr><tr><td>年龄:</td><td>33</td></tr><tr><td>性别:</td><td>男</td></tr></table></div>
</script>

JSX中的代码可以是DOM元素，也可以是以后的自定义组件

  • 渲染虚拟DOM到目标容器上

 const root=ReactDOM.createRoot(document.getElementById('app'))root.render(divElement)

3、JSX的底层渲染机制

jsx的底层渲染机制可以分为如下步骤

第1步：把编写好的jsx语法，编译成虚拟DOM对象

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

可以在babel中测试一下（babel的地址：Babel · Babel）

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

参数说明

|- ele:元素的标签名或者组件

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

|- children:第三个以及以后的参数，都是当前元素的子节点

  • 执行createElement方法后，创建出virtual DOM虚拟DOM对象，格式如下

第2步：将虚拟DOM通过diff算法转成真实DOM

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/94193.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

DVWA XSS

DVWA XSS

反射型 low 查看源代码&#xff0c;没有任何过滤 构造 medium 这里是过滤了 high 这里把双写和大小写和JavaScript都过滤了,用事件来绕过<img src0 οnerrοralert(“xss”)> impossible 这里使用htmlspecialchars进行实体转换并且输出的结果还不能使用事件来…
阅读更多...
Jmeter+ServerAgent

Jmeter+ServerAgent

一、Jmeter 下载 https://jmeter.apache.org/download_jmeter.cgi选择Binaries二进制下载 apache-jmeter-5.6.2.tgz 修改配置文件 jmeter下的bin目录&#xff0c;打开jmeter.properties 文件 languagezh_CN启动命令 cd apache-jmeter-5.6/bin sh jmeter二、ServerAgent 监…
阅读更多...
Mac软件删除方法？如何删除不会有残留

Mac软件删除方法？如何删除不会有残留

Mac电脑如果有太多无用的应用程序&#xff0c;很有可能会拖垮Mac系统的运行速度。因此&#xff0c;卸载电脑中无用的软件是优化Mac系统运行速度的最佳方式之一。Mac卸载应用程序的方式是和Windows有很大的区别&#xff0c;特别对于Mac新用户来说&#xff0c;如何无残留的卸载删…
阅读更多...
SpringBoot完整项目部署流程(软件安装-前后端部署)

SpringBoot完整项目部署流程(软件安装-前后端部署)

SpringBoot完整项目部署流程 安装Jdk 使用XTFP工具将jdk的二进制发布包上传到Linux 解压安装包 tar -zxvf jdk-8u171-linux-x64.tar.gz -C /usr/local解压完毕 配置环境变量&#xff0c;使用vim命令修改 /etc/profile文件&#xff0c;在文件末尾加入如下配置 JAVA_HOME/usr…
阅读更多...
Linux：ansible-playbook配置文件（剧本）

Linux：ansible-playbook配置文件（剧本）

如果你还没有配置基础的ansible和一些基础用法可以去下面的链接 playbook是基于ansible的 Linux&#xff1a;ansible自动化运维工具_鲍海超-GNUBHCkalitarro的博客-CSDN博客 Linux&#xff1a;ansible自动化运维工具_鲍海超-GNUBHCkalitarro的博客-CSDN博客 Linux&…
阅读更多...
MySQL高阶语句之常用查询

MySQL高阶语句之常用查询

目录 常用查询 按关键字排序 区间判断及查询不重复记录 对结果进行分组 限制结果条目 设置别名 通配符 子查询 常用查询 &#xff08;增、删、改、查&#xff09; 对 MySQL 数据库的查询&#xff0c;除了基本的查询外&#xff0c;有时候需要对查询的结果集进行处理。 …
阅读更多...
P13 VUE 二级menu实现

P13 VUE 二级menu实现

主要修改以下几个点&#xff1a; CommonAside.vue中 外层便利有孩子节点&#xff0c;关键词key是对应的标签&#xff0c;class动态图表渲染 内层遍历不能再用item&#xff0c;用subitem&#xff0c;遍历该item.childeren&#xff0c;关键词是path&#xff0c; <templat…
阅读更多...
51单片机项目（7）——基于51单片机的温湿度测量仿真

51单片机项目（7）——基于51单片机的温湿度测量仿真

本次做的设计&#xff0c;是利用DHT11传感器&#xff0c;测量环境的温度以及湿度&#xff0c;同时具备温度报警的功能&#xff1a;利用两个按键&#xff0c;设置温度阈值的加和减&#xff0c;当所测温度大于温度阈值的时候&#xff0c;蜂鸣器就会响起&#xff0c;进行报警提示。…
阅读更多...
C++之std::search应用实例(一百八十九)

C++之std::search应用实例(一百八十九)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…
阅读更多...
好马配好鞍：Linux Kernel 4.12 正式发布

好马配好鞍：Linux Kernel 4.12 正式发布

Linus Torvalds 在内核邮件列表上宣布释出 Linux 4.12&#xff0c;Linux 4.12 的主要特性包括&#xff1a; BFQ 和 Kyber block I/O 调度器&#xff0c;livepatch 改用混合一致性模型&#xff0c;信任的执行环境框架&#xff0c;epoll 加入 busy poll 支持等等&#xff0c;其它…
阅读更多...
JixiPix Artista Impresso Pro for mac(油画滤镜效果软件)

JixiPix Artista Impresso Pro for mac(油画滤镜效果软件)

JixiPix Artista Impresso pro Mac是一款专业的图像编辑软件&#xff0c;专为Mac用户设计。它提供了各种高质量的图像编辑工具&#xff0c;可以帮助您创建令人惊叹的图像。该软件具有直观的用户界面&#xff0c;使您可以轻松地浏览和使用各种工具。 它还支持多种文件格式&…
阅读更多...
权限提升-Windows本地提权-AT+SC+PS命令-进程迁移-令牌窃取-getsystem+UAC

权限提升-Windows本地提权-AT+SC+PS命令-进程迁移-令牌窃取-getsystem+UAC

权限提升基础信息 1、具体有哪些权限需要我们了解掌握的&#xff1f; 后台权限&#xff0c;网站权限&#xff0c;数据库权限&#xff0c;接口权限&#xff0c;系统权限&#xff0c;域控权限等 2、以上常见权限获取方法简要归类说明&#xff1f; 后台权限&#xff1a;SQL注入,数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023