虚拟dom
输入网址，按下回车，发生了什么（简略）
- 浏览器会向服务器发送请求报文
- 服务器接受请求，并给予浏览器响应信息
- 浏览器接受到响应信息，会通过不同的解析器对不同的文件进行解析并渲染
- 如果页面中引入了其他的文件（js/css），就会再次发送相应的请求，如果js有对DOM的操作就可能会产生重排重绘
重排重绘
- 如果元素中的属性发生变化（位置，大小）发生改变，可能会影响到其他元素，那么这个时候解析器就会对收到的影响元素的几何属性重新计算，计算的过程就是重排，然后将其渲染到页面，渲染的过程就是重绘
- 如果重排重绘的次数过多，那么就会影响到用户的体验
虚拟dom是什么，为什么要使用虚拟dom
react使用虚拟dom来减少重排重绘，提高渲染的效率
- 虚拟dom并不是真实的dom，虚拟dom的本质是一个js对象
- 虚拟dom是轻量级的，真实dom是重量级的
- react通过操作虚拟dom，对虚拟dom对象进行一系列操作，操作完毕之后将其转化为真实dom，从而达到减少重排重绘的过程
如何创建虚拟dom（两种方式）
- 使用createElement（不推荐）
//createElement是React下的方法
//createElement接受三个参数，第一个参数是标签的名字，第二个参数是标签的属性，如果没有可以写null也可以写一个空对象，第三个参数是元素的内容
const div=React.createElement('div',{className:'myDiv'},'1')
使用这种方法创建虚拟dom元素比较麻烦，比如标签之间的嵌套，效率低，运行效率差
jsx
- 使用jsx
使用jsx的本质依旧是通过React.createElement,只是我们的书写更方便了
例如
<div><div/>还是会被转义为React.createEelment('div',null)
root.render((
<div>
<p>1</p>
<p>1</p>
<p>1</p>
<span>2</span>
</div>
))
注意
- jsx有且只能由一个根元素，不可出现两个标签同级别，需要有父标签包裹，例如：空标签，div，React提供的组件
<React.Fragment></React.Fragment> - jsx中标签之间如果没有内容可直接书写为
<div/> - jsx中不允许出现浏览器无法识别的标签，如果标签首字母大写，会被认为是组件（组件未定义会有异常）
语法
使用{}来包裹js代码，大致理解为js怎么写花括号里面就怎么写，原生js事件接受一个字符串，在react里依然接受一个{}里面写上函数，或者函数名，jsx中使用className定义类名
