网站 授权书,如何做网站的悬浮窗口,莱芜区都市网莱芜杂谈,如皋市建设局网站在哪里面试题#xff1a;什么是虚拟DOM#xff1f;其优点有哪些#xff1f; 标准且浅显的答案 虚拟dom本质上就是一个普通的 JS 对象#xff0c;用于描述视图的界面结构 虚拟 DOM 最早是由 React 团队提出来的#xff0c;因此 React 团队在对虚拟 DOM 的定义上面有绝对的话语权。… 面试题什么是虚拟DOM其优点有哪些 标准且浅显的答案 虚拟dom本质上就是一个普通的 JS 对象用于描述视图的界面结构 虚拟 DOM 最早是由 React 团队提出来的因此 React 团队在对虚拟 DOM 的定义上面有绝对的话语权。可以参考https://legacy.reactjs.org/docs/faq-internals.html
Virtual DOM 是一种编程概念 。在这个概念里 UI 以一种理想化的或者说“虚拟的”表现形式被保存于内存中。
也就是说只要我们有一种方式能够将真实 DOM 的层次结构描述出来那么这就是一个虚拟 DOM。 在 React 中React 团队使用的是 JS 对象来对 DOM 结构进行一个描述。但是很多人会直接把 JS 对象和虚拟 DOM 划等号这种理解是不太准确的比较片面的。
虚拟 DOM 和 JS 对象之间的关系前者是一种思想后者是一种思想的具体实现。
为什么需要虚拟 DOM
使用虚拟 DOM 主要有两个方面的优势
相较于 DOM 的体积优势和速度优势多平台的渲染抽象能力
相较于 DOM 的体积优势和速度优势
首先我们需要明确一个点JS 层面的计算速度要比 DOM 层面的计算要快
DOM 对象最终要被浏览器渲染出来之前浏览器会有很多工作要做浏览器的渲染原理DOM 对象上面的属性也非常非常多
const div document.createElement(div);
for(let i in div){console.log(i )}操作 JS 对象的时间和操作 DOM 对象的时间是完全不一样的。
JS 层面的计算速度要高于 DOM 层面的计算速度。 此时有一个问题虽然使用了 JS 对象来描述 UI但是最终不还是要用原生 DOM API 去操作 DOM 么 虚拟 DOM 在第一次渲染页面的时候并没有什么优势速度肯定比直接操作原生 DOM API 要慢一些虚拟 DOM 真正体现优势是在更新阶段。
根据 React 团队的研究在渲染页面时相比使用原生 DOM API开发人员更加倾向于使用 innerHTML
let newP document.createElement(p);
let newContent document.createTextNode(this is a test);
newP.appendChild(newContent);
document.body.appendChild(newP);document.body.innerHTML pthis is a test/p
;因此在使用 innerHTML 的时候就涉及到了两个层面的计算
JS 层面解析字符串DOM 层面创建对应的 DOM 节点
接下来我们加入虚拟 DOM 来进行对比
innerHTML虚拟 DOMJS 层面计算解析字符串创建 JS 对象DOM 层面计算创建对应的 DOM 节点创建对应的 DOM 节点
虚拟 DOM 真正发挥威力的时候是在更新阶段
innerHTML 进行更新的时候要全部重新赋值这意味着之前创建的 DOM 节点需要全部销毁掉然后重新进行创建
但是虚拟 DOM 只需要更新必要的 DOM 节点即可
innerHTML虚拟 DOMJS 层面计算解析字符串创建 JS 对象DOM 层面计算销毁原来所有的 DOM 节点修改必要的 DOM 节点DOM 层面计算创建对应的 DOM 节点
多平台的渲染抽象能力
UI fstate这个公式进一步进行拆分可以拆分成两步
根据自变量的变化计算出 UI根据 UI 变化执行具体的宿主环境的 API
虚拟 DOM 只是多真实 UI 的一个描述回头根据不同的宿主环境可以执行不同的渲染代码
浏览器、Node.js 宿主环境使用 ReactDOM 包Native 宿主环境使用 ReactNative 包Canvas、SVG 或者 VMLIE8宿主环境使用 ReactArt 包ReactTest 包用于渲染出 JS 对象可以很方便地测试“不隶属于任何宿主环境的通用功能”
React 中的虚拟DOM
在 React 中通过 JSX 来描述 UIJSX 最终会被转为一个叫做 createElement 方法的调用调用该方法后就会得到虚拟 DOM 对象。
经过 Babel 编译后结果如下 在源码中 createElement 方法如下
/**** param {*} type 元素类型 h1* param {*} config 属性对象 {id : aa}* param {*} children 子元素 hello* returns* h1 idaahello/h1*/
export function createElement(type, config, children) {let propName;const props {};let key null;let ref null;let self null;let source null;// 说明有属性if (config ! null) {// ...for (propName in config) {if (hasOwnProperty.call(config, propName) !RESERVED_PROPS.hasOwnProperty(propName)) {props[propName] config[propName];}}}// 经历了上面的 if 之后所有的属性都放到了 props 对象上面// props {id : aa}// children 可以有多个参数这些参数被转移到新分配的 props 对象上// 如果是多个子元素对应的是一个数组const childrenLength arguments.length - 2;if (childrenLength 1) {props.children children;} else if (childrenLength 1) {const childArray Array(childrenLength);for (let i 0; i childrenLength; i) {childArray[i] arguments[i 2];}// ...props.children childArray;}// 添加默认的 propsif (type type.defaultProps) {const defaultProps type.defaultProps;for (propName in defaultProps) {if (props[propName] undefined) {props[propName] defaultProps[propName];}}}// ...return ReactElement(type,key,ref,self,source,ReactCurrentOwner.current,props);
}const ReactElement function (type, key, ref, self, source, owner, props) {// 该对象就是最终向外部返回的 vdom也就是用来描述 DOM 层次结构的 JS 对象const element {// 让我们能够唯一地将其标识为 React 元素$$typeof: REACT_ELEMENT_TYPE,// 元素的内置属性type: type,key: key,ref: ref,props: props,// 记录负责创建此元素的组件。_owner: owner,};// ...return element;
};在上面的代码中最终返回的 element 对象就是我们所说的虚拟 DOM 对象。在官方文档中官方更倾向于将这个对象称之为 React 元素。
真题解答 题目什么是虚拟DOM其优点有哪些 参考答案 虚拟 DOM 最初是由 React 团队所提出的概念这是一种编程的思想指的是针对真实 UI DOM 的一种描述能力。 在 React 中使用了 JS 对象来描述真实的 DOM 结构。虚拟DOM和 JS 对象之间的关系前者是一种思想后者是这种思想的具体实现。 使用虚拟 DOM 有如下的优点 相较于 DOM 的体积和速度优势多平台渲染的抽象能力 相较于 DOM 的体积和速度优势 JS 层面的计算的速度要比 DOM 层面的计算快得多 DOM 对象最终要被浏览器显示出来之前浏览器会有很多工作要做浏览器渲染原理DOM 上面的属性也是非常多的 虚拟 DOM 发挥优势的时机主要体现在更新的时候相比较 innerHTML 要将已有的 DOM 节点全部销毁虚拟 DOM 能够做到针对 DOM 节点做最小程度的修改 多平台渲染的抽象能力 浏览器、Node.js 宿主环境使用 ReactDOM 包Native 宿主环境使用 ReactNative 包Canvas、SVG 或者 VMLIE8宿主环境使用 ReactArt 包ReactTest 包用于渲染出 JS 对象可以很方便地测试“不隶属于任何宿主环境的通用功能” 在 React 中通过 JSX 来描述 UIJSX 仅仅是一个语法糖会被 Babel 编译为 createElement 方法的调用。该方法调用之后会返回一个 JS 对象该对象就是虚拟 DOM 对象官方更倾向于称之为一个 React 元素。
