上海网站开发,杭州市公共资源交易中心,wordpress+分享后下载,网站 description一、JSX
JSX是javascript XML的简写#xff0c;实际上是javascript的扩展#xff0c;既有javascript的语法结构#xff0c;又有XML的结构
1、JSX的规则要求 jsx必须要有一个根节点
如果不想产生无用的根标签#xff0c;但是还要遵守JSX的语法的要求#xff0c;可以使用…一、JSX
JSX是javascript XML的简写实际上是javascript的扩展既有javascript的语法结构又有XML的结构
1、JSX的规则要求 jsx必须要有一个根节点
如果不想产生无用的根标签但是还要遵守JSX的语法的要求可以使用如下两种方式
JSX必须要有一个根节点而且编译之后在浏览器中不产生根标签jsx可以使用如下两种方式完成 使用空标签的方式来完成
const contenth1Hello Giles/h1h1Hello Woniuxy/h1/ Fragment组件来完成
const contentFragmenth1Hello Giles/h1h1Hello Woniuxy/h1/Fragment JSX中的标签如果没有子元素那么也要使用/来作为结束
img 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/ 采用驼峰式命名法 class----className for---htmlFor tabindex---tabIndex 为了避免分号陷阱建议大家必须使用()将元素括起来
const content(/)
2、JSX的表达式 在JSX中不管是动态元素的渲染还是属性的渲染全部通过{}来进行渲染的
let nameGiles
let age38
let jobteacher
let hobby[play basketball,play football]
let avatarhttps://www.baidu.com/img/flexible/logo/pc/result.png
const template(h1个人简介/h1div姓名:{name}/divdiv年龄:{age}/divdiv工作:{job}/divdiv爱好:{hobby}/divdivimg src{avatar}/img/div/) jsx的算数表达式和三元表达式
div是否成年:{age18?成年:未成年}/div
div虚岁:{age1}/div 函数表达式
let idcard610122198404084030
const 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/) 对象表达式
let user{name:刘备,age:39,job:皇帝
}
const introduceuser我叫${user.name},今年${user.age}岁,职业是${user.job}
const template(div姓名:{user.name}/divdiv年龄:{user.age}/divdiv职业:{user.job}/divdiv介绍:{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 (Fragmentdiv classNamemimediv classNameorder-centerdiv classNameorder-center-headerdiv订单中心/divdiv查看全部/div/divdiv classNameorder-center-body{orderList.map(item div classNameorder-itemi className{iconfont item.icon}/idiv{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 Fragmentimg src{logo}/img/Fragment}
} 通过node.js的require方法引入
import logo from ./assets/logo.png
export default class App extends Component {render() {const logorequire(./assets/logo.png)return Fragmentimg src{logo}/img/Fragment}
}
注意如果图片是网络图片直接写网址就可以了无需进行其他处理如果是网络图片有的时候图片地址是正确的但是图片却出不来可能是防盗链问题。
四、虚拟DOM和jsx底层渲染机制
1、什么是虚拟DOM
在 React 中每个 DOM 对象都有一个对应的 Virtual DOM 对象它是 DOM 对象的 JavaScript 对象表现形式其实就是使用 JavaScript 对象来描述 DOM 对象信息比如 DOM 对象的类型是什么它身上有哪些属性它拥有哪些子元素。
下面是一个DOM对象
div classNamecontainerh3Hello React/h3pReact 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 helloRectEleReact.createElement(h1,null,Hello React);
const helloWoniuEleReact.createElement(h1,null,Hello Woniuxy);
const helloGilesEleReact.createElement(h1,null,Hello Giles);
const containerElementReact.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 helloRectEleReact.createElement(h1,{key:0},Hello React);
const helloWoniuEleReact.createElement(h1,{key:1},Hello Woniuxy);
const helloGilesEleReact.createElement(h1,{key:2},Hello Giles);
const containerElementReact.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(divh1Hello React/h1h1Hello Woniuxy/h1h1Hello 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 srchttps://unpkg.com/react18/umd/react.development.js crossorigin/scriptscript srchttps://unpkg.com/react-dom18/umd/react-dom.development.js crossorigin/scriptscript src./node_modules/babel-standalone/babel.js/script
注意这里要引入babel.js对JSX进行转换首先引入之前可以通过yarn add babel-standalone方式来下载babel 编写jsx
script typetext/babelconst divElementdivh1个人介绍/h1tabletrtd姓名:/tdtd张三/td/trtrtd年龄:/tdtd33/td/trtrtd性别:/tdtd男/td/tr/table/div
/script
JSX中的代码可以是DOM元素也可以是以后的自定义组件 渲染虚拟DOM到目标容器上 const rootReactDOM.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
