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

最新推荐文章于 2024-04-23 06:30:00 发布
最新推荐文章于 2024-04-23 06:30:00 发布
阅读量225 收藏
点赞数
分类专栏： 55前后端分离博客项目(一)react框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42227818/article/details/104304693
版权

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

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

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

在这里插入图片描述
也就是说h1的兄弟可能是文本节点
在这里插入图片描述
这就形成了一个树形结构，标准的html可以解析成属性结构

在这里插入图片描述
document其实是操作的起始
在这里插入图片描述
这两个后面都有空白字符，因为html内部包了一个换行符
在这里插入图片描述
h1外面也有换行符

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

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

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

在这里插入图片描述
在这里插入图片描述
实际上写这个东西不是当做html理解的，当成jsx组件来理解，这个组件实际上继承react组件类的，这个类型必须在渲染函数中return一个对象出来，就可以交给这里进行渲染

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

在这里插入图片描述
JSX语法要求关闭
在这里插入图片描述
有些错误会在这里提示，不会生成新的bundle.js，浏览器就不会刷新

在这里插入图片描述
这种网页就称为SPA，single，page，application，单页应用，普通爬虫爬没用
在这里插入图片描述
这地方看的是DOM树。这是实时的DOM，虚拟dom是react框架的事，在浏览器内存空间开辟构建了虚拟dom

在这里插入图片描述
框架操作虚拟dom来和dom比较，哪些是需要渲染的数据
在这里插入图片描述
JSX是一种规范，不按照这个来就会报错

在这里插入图片描述
凡是首字母小写都是标记，大写是组件
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
但凡return的跟不是一个，就会报错，而且是写在render函数中
在这里插入图片描述

看起来这里是html，实际上是xml,xml要求所有标签闭合，包括自己定义的组件标签，全部闭合，不闭合都不行
在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述
这样就是返回的字符串
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
现在操作src和index是没有任何关系，只要告诉id号即可
在这里插入图片描述
ajax前后端分离，可以让项目进一步分化，可以向微服务方式部署

48N6E
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JSX创建虚拟DOM并渲染
cofecode的博客
07-26 2043
JSX 是React创的js的语法扩展 可以在js中编写像HTML一样的代码。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title
JSX 与虚拟 DOM
平安蜀黍的记事本
01-08 386
企业项目实战 > 第二部分 > React 基础回顾 JSX 与虚拟 DOM 什么是 JSX JSX 即 JavaScript XML —— 一种在 React 组件内部构建标签的类似于 XML 的语法, 其格式比较像是模版语言, 但事实上完全是在 JavaScript 内部实现的。所以它也被称之为一个 JavaScript 的语法糖, JSX 主要应用于 React 架构中, 它能让我们在 JS 中编写 XML 标记语言。这样使用 JavaScript 来构建组件以及组件之间关系的应用,.
【React框架基础知识】虚拟DOM与JSX语法
得未曾有 心净踊跃
08-29 332
众所周知，DOM操作是Web交互的核心，但是它比大多数JS操作要慢得多，例如，假设您有一个包含十个项目的列表。您删除了第一项。大多数JavaScript框架都会重建整个列表。这是必要的工作十倍！只有一个项目更改，但其余九个被重建了以前的状态。重建列表对网络浏览器来说没什么大不了的，但是现代网站可以使用大量的DOM操作。效率低下的更新已成为一个严重的问题。......
JSX与虚拟DOM：源代码到渲染的转换过程
04-23 239
虚拟DOM是React中的一个核心概念，它是React组件的内部表示。JSX语法是JavaScript的语法扩展，它允许我们在JavaScript代码中编写类似HTML的代码。Babel是一个JavaScript编译器，它可以将ES6及以上版本的JavaScript代码转换成向后兼容的JavaScript代码。函数接收三个参数：要创建的元素类型（字符串或React组件），元素的属性（一个对象，可以为空），以及元素的子元素。这样，整个React组件的虚拟DOM结构就被构建出来了。以上代码创建了一个名为。
ZF_react中的jsx丶实现原生dom的渲染丶函数组件丶类组件的首次渲染实现
lin_fightin的博客
09-25 428
jsx jsx在babel的帮助下可以转换为react.createElement方法的调用，如 PURE是treeshaking的时候用的，标志这是个纯函数。 新老版本的区别 在17之前，我们需要显示引入React，然后Babel转化为React.CreateElement方法，而新的版本中不需要显示引入React，react会自动转化为（Object.s_jsx）方法。 JSX只是react提供的一个语法糖，react元素是构建react应用的最小 单位。如，let elemtn = < d
React中虚拟DOM与JSX详解
ct5211314的博客
02-28 567
一、React使用了虚拟DOM 1.虚拟DOM 在React中使用了虚拟DOM，没有使用浏览器的正式DOM，而是构建了真实DOM的虚拟表示，所谓“虚拟表示”指的是“真实DOM”的JavaScript对象树，在React中我们不直接操纵DOM，而是必须操作虚拟DOM，并让React负责更改浏览器DOM。 2.为什么不修改真实DOM 状态很难跟踪：追踪DOM现在和之前状态并将其操作为需要的形式会变的很困难 性能低：修改真实DOM是一个代价高昂的操作，且每次变化时都会修改DOM会导致性能显著下降 3.
JSX 与 Virtual DOM 学习
huaqi_的博客
01-21 473
JSX 本质、React.createElement() 参数解析、Virtual DOM / 虚拟 DOM、JSX 到 真实 DOM 图解、为什么使用 Virtual DOM
将CPX (JSX类似于语法)转换为asm-dom虚拟DOM - mbasso/gccx
01-27
gccxTransforms CPX (JSX like syntax) into asm-dom Virtual DOMMotivation Virtual DOM is a little bit verbose to write, we need a lot, not to much readable, lines of code to create a view. In addition ...
asm-dom-cmake:使用 asm-dom 和 cmake 的 C++ 虚拟 dom
05-30
这要归功于和 （类似于 C++ 的 JSX 语法）。 只使用 CMake（没有疯狂的 Javascript 工具，只使用 C++ :red_heart: ) 自包含（cmake 会为你下载东西） 怎么建？ 确保安装了 cmake、emscripten 和 npm。 mkdir ...
前端大厂最新面试题-JSX to DOM.docx
06-06
总结来说，JSX到DOM的过程涉及React将组件的JSX代码转化为JavaScript对象（虚拟DOM），然后通过`ReactDOM.render`方法将虚拟DOM挂载到实际DOM上。在状态变化时，React利用reconciliation算法和批处理技术来高效地...
jsx-compiler:JSX 在线编译器 - 了解 JSX 如何转换标记
06-23
jsx-compiler是一个在线工具，专门用于将JSX代码编译成JavaScript，方便开发者进行实验和学习JSX的工作原理。 ### JSX 简介 JSX是Facebook为React开发的一种语法糖，它允许我们在JavaScript中嵌入类似XML的语法，...
react-react面试题之Jsx转换成真实DOM的过程.zip
03-20
这一过程涉及到了React的编译、虚拟DOM和实际DOM的交互等核心概念。下面我们将详细探讨这一过程。 1. **Babel转换**：首先，JSX代码需要通过Babel这样的转译器进行预处理。Babel是一个广泛使用的JavaScript编译工具...
实战json、html、jsx的互转
bystarlight的博客
06-08 8085
全文链接 jsx2html 场景 将下面的jsx转换为html const items = ['one', 'two', 'three']; const SearchData = ({ data = [] }) => { let list = null; if (data.length) { list = data.map((l, k) => (p ke
react的虚拟DOM转换成DOM过程
liuyang1106的博客
05-14 6208
1：babel的支持    我们知道HTML5文本中，我们是无法使用jsx的，例如，下面的定义就会出错：   let vdom = (&lt;div id="box"&gt; &lt;div&gt;hello ,World!&lt;/div&gt; &lt;span&gt;你好吗&lt;/span&gt; &lt;/div&gt; )    babel也提供了
HTML格式转JSX格式的工具
how2js的博客
04-28 2108
HTML格式转JSX格式的工具
jsx转为html,实战json、html、jsx的互转
weixin_32404293的博客
05-30 942
jsx2html场景将下面的jsx转换为htmlconst items = ['one', 'two', 'three'];const SearchData = ({ data = [] }) => {let list = null;if (data.length) {list = data.map((l, k) => (<p key={k}>{l}p>));} el...
HTML快速转成 JSX 的方法
keji_123的博客
02-11 5535
如何把html快速转成react可用的jsx代码呢？下面推荐一个工具HTML to JSX Compiler https://www.geeksss.com/pages/html2jsx.php
聊聊 JSX 和虚拟 DOM
cxy19930826的博客
01-31 412
聊聊 JSX 和虚拟 DOM 新蜂商城开源仓库：https://github.com/newbee-ltd（内涵 Vue 2.x 和 Vue 3.x 的 H5 商城开源代码） Vue 3.x + Vant 3.x 高仿微信记账本开源地址：https://github.com/Nick930826/daily-cost 写在前面 这篇文章我构思了很久，想用比较白话的形式阐述关于 JSX 和 VDOM 的知识点。翻阅了不少相关内容，多数文章都是以源码为基础，讲的内容不能说不好，但是至少我觉得对于刚入门的前端
新型智慧城市项目技术方案（2283页）.pdf
最新发布
08-16
新型智慧城市项目技术方案（2283页）
React中文文档解读 - 虚拟DOM与响应式更新
"React 中文版 - v1.1.pdf" React是由Facebook开发的一个用于构建用户界面的JavaScript库，尤其适合...无论是小型应用还是大型项目，React都能胜任，它的组件化思想和虚拟DOM策略使其在性能和可维护性方面表现出色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值