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