React笔记（二）JSX
一、JSX
JSX是javascript XML的简写，实际上是javascript的扩展，既有javascript的语法结构，又有XML的结构
1、JSX的规则要求
-
jsx必须要有一个根节点
如果不想产生无用的根标签，但是还要遵守JSX的语法的要求，可以使用如下两种方式
JSX必须要有一个根节点，而且编译之后在浏览器中不产生根标签，jsx可以使用如下两种方式完成
-
使用空标签的方式来完成
const content=<>
Hello Giles
Hello Woniuxy
-
Fragment组件来完成
const content=
Hello Giles
Hello Woniuxy
-
JSX中的标签如果没有子元素，那么也要使用
来作为结束
或者
-
采用驼峰式命名法
-
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=(
<>
个人简介
姓名:{name}
年龄:{age}
工作:{job}
爱好:{hobby}
)-
jsx的算数表达式和三元表达式
是否成年:{age>=18?'成年':'未成年'}
虚岁:{age+1}-
函数表达式
let idcard="610122198404084030"
const getBirthday=idcard=>idcard.slice(6,10)+"-"+idcard.slice(10,12)+"-"+idcard.slice(12,14)
const template=(
<>
个人简介
姓名:{name}
年龄:{age}
工作:{job}
爱好:{hobby}
是否成年:{age>=18?'成年':'未成年'}
虚岁:{age+1}
生日:{getBirthday(idcard)}
)-
对象表达式
let user={
name:'刘备',
age:39,
job:'皇帝'
}
const introduce=user=>`我叫${user.name},今年${user.age}岁,职业是${user.job}`
const template=(<>
姓名:{user.name}
年龄:{user.age}
职业:{user.job}
介绍:{introduce(user)}
)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 (
订单中心
查看全部
{
orderList.map(item =>
{item.title}
)
}
)
}
}二、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、行内样式
语法
当然也可以将对象提取出来
const headStyle={border:'1px solid #eee',padding:'10px',backgroundColor:'#ccc',color:'#fff'}
序号 注意：样式名采用驼峰式命名法，如果有多个单词，每个单词的首字母必须要大写才可以。
三、引入本地图片
如果在一个组件中要引入图片，这个图片可以来自本地，也可以来自网络，来自本地图片的处理
如果要引入本地中图片，常用的方法有两种
-
通过ES6的import方式进行导入
import logo from './assets/logo.png'
export default class App extends Component {
render() {
return
}
}-
通过node.js的require方法引入
import logo from './assets/logo.png'
export default class App extends Component {
render() {
const logo=require('./assets/logo.png')
return
}
}注意：如果图片是网络图片，直接写网址就可以了，无需进行其他处理，如果是网络图片，有的时候图片地址是正确的，但是图片却出不来，可能是防盗链问题。
四、虚拟DOM和jsx底层渲染机制
1、什么是虚拟DOM
在 React 中，每个 DOM 对象都有一个对应的 Virtual DOM 对象，它是 DOM 对象的 JavaScript 对象表现形式，其实就是使用 JavaScript 对象来描述 DOM 对象信息，比如 DOM 对象的类型是什么，它身上有哪些属性，它拥有哪些子元素。
下面是一个DOM对象
Hello React
React is great
对应的虚拟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 . 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=(
Hello React
Hello Woniuxy
Hello Giles
)
ReactDOM.render(conatiner,document.getElementById('root'));
实际上JSX的方式最终还是会转成第一种使用React.createElement()函数创建的方式，这里只是为了方便使用了JSX,我们编写的JSX通过babel来转换的，下面我们可以在官网上来做这个实验
下面是babel的官网：babel官方网站： Babel 中文文档 | Babel中文网 · Babel 中文文档 | Babel中文网
这里提供了将JSX的方式最终转成createElement的方式
使用JSX的方式创建虚拟DOM的步骤
-
在body中定义一个div容器
-
导入包
注意：这里要引入babel.js对JSX进行转换，首先引入之前可以通过yarn add babel-standalone方式来下载babel
-
编写jsx
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