您的位置: 首页  >  文章  >  2020/02/13 01-虚拟DOM和JSX

2020/02/13 01-虚拟DOM和JSX

分类: 文章 • 2023-11-19 12:40:52

react是13年facebook开源的东西，后台的分离有一个叫MVC，前台代码就是浏览器要跑的，比如JS代码，做了一个前端的MVC框架
facebook自己来写了js框架，用来架设instagram，然后开源出来了。
然后阿里蚂蚁金服提供了很多前端控件，react是解决的前端mvc框架是view视图层的问题
2020/02/13 01-虚拟DOM和JSX
创新的提出了虚拟的DOM，DOM（文档对象模型document object model）浏览器最核心的，就是渲染引擎和js引擎，外壳不重要

渲染引擎除了要解决整个html要对应成相应的一些格式或者布局，要解决这个问题以外，还必须提供一种操作接口，为了显示网页，要想办法把网页结构解开，变成一种真正的结构，就得到一种树形结构

左边是一个很简单的html，p标签是做段落分段的，如何来解析，不解析无法做渲染，渲染引擎首先想办法解开了，这是一种树形结构
2020/02/13 01-虚拟DOM和JSX
解析成以document为跟，html为相当于是整个网页的根节点，text文本结点是一个回车换行符\r\n，html和body之间实际上是有换行符的，这些空白字符其实就是文本节点。
再往下碰到的第一个结点就是body，往下到/body结束，body标签，有开始有结束标识一个范围，这里面有一些text文本标签空白字符，剩下的比如h1标签，p标签，内部还有文本

2020/02/13 01-虚拟DOM和JSX
也就是说h1的兄弟可能是文本节点
2020/02/13 01-虚拟DOM和JSX
这就形成了一个树形结构，标准的html可以解析成属性结构

2020/02/13 01-虚拟DOM和JSX
document其实是操作的起始
2020/02/13 01-虚拟DOM和JSX
这两个后面都有空白字符，因为html内部包了一个换行符
2020/02/13 01-虚拟DOM和JSX
h1外面也有换行符

2020/02/13 01-虚拟DOM和JSX
这样在内存中会形成一个树形结构，就可以来操作，给的操作接口其实就是DOM的操作接口，如何操作就用JS，提供一个document对象，找到这些节点进行操作
2020/02/13 01-虚拟DOM和JSX
可以在树立面进行增加删除或者修改
2020/02/13 01-虚拟DOM和JSX
浏览器必须对DOM进行支持，用户可以用js调用DOM接口来修改DOM树节点，从而修改整个网页

2020/02/13 01-虚拟DOM和JSX
比如创建用户，输入的时候，还没提交网页，已经提示用户已经注册，其实就是js调用，写的内容用事件触发，到后台询问这个用户名是否存在，这个用户已经存在就会动态添加到网页节点里，如果ok，网页就会立马渲染，做部分调整，然后显示出来，只要是dom中出现了某个结点，某个结点下面发生了变化，这个节点所对应的部分就需要做渲染，要重绘

dom树重绘的代价太高，每个节点变了以后就要重新渲染一次，这个实际上是影响了前端的感受，facebook团队考虑到了这一点，所以在操作的时候并没有直接操作dom，用react的时候实际上并不直接操作dom，而是在内存中构建出了一个数据对象，这个对象叫virtual dom，虚拟dom来替代原有的dom，所有的操作都在虚拟的dom上操作，操作完，会把虚拟dom的变化放到dom上去，哪里差异就哪里渲染，减少了不避免的渲染。
在虚拟dom上，如果操作了很多次，发现操作还是回到了原始，虚拟dom发现两次比较一样，就没必要渲染了，发现一样，就不会通知dom了，现在的前端框架很多都采取了虚拟dom的方式，可以提高用户整体的感受
2020/02/13 01-虚拟DOM和JSX
jsx是一种js和xml混写的方式，不需要再调用原始的create element创造这些节点，只需要把html标记按照一定的格式写进去就行，大大提高写的效率
2020/02/13 01-虚拟DOM和JSX
这是要渲染的东西，是一个节点
2020/02/13 01-虚拟DOM和JSX
通过document对象，在整个dom树中找元素，通过元素的ID去找，（元素ID是example）
2020/02/13 01-虚拟DOM和JSX
dom树里面的东西一般称为节点，也称为element元素，也称为节点node
2020/02/13 01-虚拟DOM和JSX
找到example元素后，找到dom树下把这些节点加进去
2020/02/13 01-虚拟DOM和JSX
2020/02/13 01-虚拟DOM和JSX
这个是通过webpack打包起来的，打包后从服务器端下载到浏览器端
2020/02/13 01-虚拟DOM和JSX
而浏览器端右键显示源代码只会看到这个，也就是爬虫只会爬这些内容，需要其他方式来爬
2020/02/13 01-虚拟DOM和JSX
要看bundle.js就要看入口文件指向的是src里的index
2020/02/13 01-虚拟DOM和JSX
不加大括号说明是缺省导入
2020/02/13 01-虚拟DOM和JSX
缺省导入的名字可以随意改
2020/02/13 01-虚拟DOM和JSX
继承react父类，父类显示空空荡荡，你要显示就是很大差异的，就需要一个渲染函数，这种写法可以理解为是js和xml混合的写法
这就是JSX
2020/02/13 01-虚拟DOM和JSX
借助react-dom来操作dom树无非是在dom树里进行渲染
2020/02/13 01-虚拟DOM和JSX
这个网页有id叫newroot，既然叫id，那么在网页中就是唯一的，每个标签之上都可以定义id
2020/02/13 01-虚拟DOM和JSX
可以把渲染的东西直接放下来，
2020/02/13 01-虚拟DOM和JSX
放下来之后就可以注释掉，这里只不过用JSX语法
2020/02/13 01-虚拟DOM和JSX
右键bash
2020/02/13 01-虚拟DOM和JSX
启动一下

2020/02/13 01-虚拟DOM和JSX
2020/02/13 01-虚拟DOM和JSX
实际上写这个东西不是当做html理解的，当成jsx组件来理解，这个组件实际上继承react组件类的，这个类型必须在渲染函数中return一个对象出来，就可以交给这里进行渲染

2020/02/13 01-虚拟DOM和JSX
渲染到哪里去，就需要网页中给它留个地方，如何找到，就可以使用getElementById
2020/02/13 01-虚拟DOM和JSX
id在本网页内应该保证唯一的，不唯一只找第一个
2020/02/13 01-虚拟DOM和JSX2020/02/13 01-虚拟DOM和JSX
记得封口
2020/02/13 01-虚拟DOM和JSX
这样就可以了
2020/02/13 01-虚拟DOM和JSX
这个地方要求一个元素，要求是JSX组件
2020/02/13 01-虚拟DOM和JSX
就相当于把这个组件放进去，这个组件支持像html的写法<ROOT/ >
2020/02/13 01-虚拟DOM和JSX
只要保存就会不端编译，因为HMR热模块替换，自动刷新 2020/02/13 01-虚拟DOM和JSX
2020/02/13 01-虚拟DOM和JSX
可以用create系列的方法来创建一个dom
2020/02/13 01-虚拟DOM和JSX
用这种方法创建
2020/02/13 01-虚拟DOM和JSX
如果嵌套很多，用这种方式创建非常麻烦，所以这种方法基本被人遗忘了，现在都用JSX2020/02/13 01-虚拟DOM和JSX
组件必须从react.component继承
2020/02/13 01-虚拟DOM和JSX
行数多建议括起来
2020/02/13 01-虚拟DOM和JSX
2020/02/13 01-虚拟DOM和JSX
查看元素，newroot是插入点
2020/02/13 01-虚拟DOM和JSX
div插入到newroot里去，下面subelemt，两边的嵌套关系是一致的，这种方式更加直观
2020/02/13 01-虚拟DOM和JSX
2020/02/13 01-虚拟DOM和JSX
2020/02/13 01-虚拟DOM和JSX
必须封口，即使是单标签也需要封口，否则报错
2020/02/13 01-虚拟DOM和JSX
可以直接斜杠，单标签就这么写
2020/02/13 01-虚拟DOM和JSX
不加内容要封口就这么封

2020/02/13 01-虚拟DOM和JSX
JSX语法要求关闭
2020/02/13 01-虚拟DOM和JSX
有些错误会在这里提示，不会生成新的bundle.js，浏览器就不会刷新

2020/02/13 01-虚拟DOM和JSX
这种网页就称为SPA，single，page，application，单页应用，普通爬虫爬没用
2020/02/13 01-虚拟DOM和JSX
这地方看的是DOM树。这是实时的DOM，虚拟dom是react框架的事，在浏览器内存空间开辟构建了虚拟dom

2020/02/13 01-虚拟DOM和JSX
框架操作虚拟dom来和dom比较，哪些是需要渲染的数据
2020/02/13 01-虚拟DOM和JSX
JSX是一种规范，不按照这个来就会报错

2020/02/13 01-虚拟DOM和JSX
凡是首字母小写都是标记，大写是组件
2020/02/13 01-虚拟DOM和JSX2020/02/13 01-虚拟DOM和JSX
2020/02/13 01-虚拟DOM和JSX
但凡return的跟不是一个，就会报错，而且是写在render函数中
2020/02/13 01-虚拟DOM和JSX

看起来这里是html，实际上是xml,xml要求所有标签闭合，包括自己定义的组件标签，全部闭合，不闭合都不行
2020/02/13 01-虚拟DOM和JSX
2020/02/13 01-虚拟DOM和JSX

单行省略小括号，多行使用小括号
2020/02/13 01-虚拟DOM和JSX2020/02/13 01-虚拟DOM和JSX
元素有嵌套，建议多行，注意缩进
2020/02/13 01-虚拟DOM和JSX
JSX是可以写表达式的，要求在整个区域内使用大括号，里面可以写表达式，类似之前的插值${i*j}跟外面的无关
2020/02/13 01-虚拟DOM和JSX
2020/02/13 01-虚拟DOM和JSX
hr就是一条水平线，写一个三元表达式
2020/02/13 01-虚拟DOM和JSX
一旦保存，就出来效果了
2020/02/13 01-虚拟DOM和JSX
也可以这么写
2020/02/13 01-虚拟DOM和JSX
没有是因为显示的不是字符串
2020/02/13 01-虚拟DOM和JSX
加个引号变成字符串
2020/02/13 01-虚拟DOM和JSX
2020/02/13 01-虚拟DOM和JSX
不放在大括号里就直接是字符串

2020/02/13 01-虚拟DOM和JSX
2020/02/13 01-虚拟DOM和JSX
这样就是返回的字符串
2020/02/13 01-虚拟DOM和JSX
2020/02/13 01-虚拟DOM和JSX2020/02/13 01-虚拟DOM和JSX
现在操作src和index是没有任何关系，只要告诉id号即可
2020/02/13 01-虚拟DOM和JSX
ajax前后端分离，可以让项目进一步分化，可以向微服务方式部署

相关推荐