虚拟DOM 和 Diff 算法，key的作用，jsx,render函数

最新推荐文章于 2022-08-12 17:10:09 发布
最新推荐文章于 2022-08-12 17:10:09 发布
阅读量51 收藏
点赞数
文章标签： javascript 操作系统 ViewUI
原文链接：http://www.cnblogs.com/zhaoyingzi/p/10921949.html
版权

虚拟DOM 和 Diff 算法

  1. 什么是虚拟DOM？
    • 使用javascript模拟了DOM结构的树形结构（对象表示），这个树结构包含整个DOM结构的信息
  2. 使用虚拟DOM有什么好处？
    • 操作数据要大大的减少性能损耗，提高渲染效率
    • 越多的真实dom操作，越损耗性能
  3. 什么是Diff 算法？
    • 是linux的基础命令，用来比较两个文本文件的差异，是代码版本管理的基石之一
    • vdom中应用diff算法是为了找出需要更新的节点
    • diff算法的实现，关注patch，patch方法中首先判断两个节点是否相同
    • 核心逻辑。createElement和updateChildren
  4. diff算法是用来做什么的？
    • vue的diff算法用于视图更新，也可以说是dom更新
  5. 接下我们以一个案例的形式告诉大家 ： 列表渲染为什么要加key?
    1. key的作用
      • 主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
  6. jsx 在vue采用的原因
    • VDOM对象树太繁琐了， 如果能像dom结构一样书写就好了， 这就引入了 jsx
  7. render函数是做什么的
    • 但是jsx始终还是不能直接去用的，必须转换成 对象 才能使用，
    • vue中 使用render 函数 解析jsx语法， 然后换成 对象结构 ，在通过 createElment 生成节点，渲染成真实DOM
  8. VDOM的渲染流程
    1. 获取数据
    2. 根据数据创建VDOM （相当于给对象赋值）
    3. 根据VDOM渲染生成真实DOM ( 根据createElmeent(‘DIV’) )
    4. 当数据发生改变后，又会生成新的VDOM
    5. 通过 diff 算法 比对 多次生成的 VDOM, 将不同的内容比对出来，然后在进行真实DOM渲染，
    6. 一样的内容是不会进行渲染的，这就是VDOM 的 ‘就地复用’ | ‘惰性原则’

转载于:https://www.cnblogs.com/zhaoyingzi/p/10921949.html

weixin_30364325
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSX在render函数中的应用详解
10-16
主要介绍了JSX在render函数中的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 虚拟dom和diff算法详解
热门推荐
weixin_42707287的博客
03-02 3万+
虚拟dom是当前前端最流行的两个框架（vue和react）都用到的一种技术，都说他能帮助vue和react提升渲染性能，提升用户体验。那么今天我们来详细看看虚拟dom到底是个什么鬼 虚拟dom的定义与作用 什么是虚拟dom 大家一定要记住的一点就是，虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。 虚拟dom的结构 从下图中，我们来看一看虚拟dom结构到底是怎样的 如上图，这就是虚拟dom的结构，他是一个对象，下面有6个属性.
Vue 虚拟DOM和Diff算法
Kameleon
04-12 4806
Vue 虚拟DOM Diff算法思考什么是虚拟DOM为什么使用虚拟DOM真实DOM和虚拟DOM的区别DOM Diff当数据发生变化时，Vue是怎么更新节点的?1. patch2. patchVnode3. updateChildren总结 思考 使用了Vue，使用了React，大家或多或少都有听过虚拟DOM，那么他和我们经常打交道的真实DOM有什么区别呢，另外，他到底是个啥玩意儿呢？ 什么是虚拟D...
Vue虚拟DOM理解及Diff算法（面试版）
qq_30907143的博客
08-12 341
Vue虚拟DOM理解及Diff算法（面试版）
虚拟DOM和Diff算法的理解
余的博客
04-26 439
目录1.虚拟 dom2.diff 算法 1.虚拟 dom 虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。 如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要
jsx-dom:使用JSX创建DOM元素
04-30
jsx-dom 使用JSX创建DOM元素。 支持ES模块和TypeScript。 安装 npm install --save jsx-dom yarn install jsx-dom 用法 注意： jsx-dom仅是ESM。 如果您绝对需要CommonJS支持，请改用jsx-dom-cjs 。 注意：如果您...
domdom直接使用单个函数和JSX来创建实际的DOM
08-12
这还不是一个简单的React实现，主要用例是直接使用单个函数和JSX来创建实际的dom，但是可以选择使用组件生命周期挂钩。
vue 渲染函数 & JSX
01-07
渲染函数 render 通过渲染函数渲染组件 Vue.component('myComponent', { render (h) { // createElement return h( 'div', // HTML tag、自定义组件、异步组件 { // 属性对象 attrs: { // 标签属性 id: 'wrap...
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
见贤思齐焉，见不贤内自省
09-28 672
React中的核心概念 1.虚拟DOM 2.Diff算法(虚拟dom的加速器，提升react性能的法宝) 虚拟DOM react酱DOM抽象为虚拟dom，虚拟dom其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提升渲染的效率。 为什么用虚拟dom？ 当dom发生更改时需要遍历，而原生dom可遍历属性多达231个，且大部分与渲染五官，更新页面代价太大。 虚拟dom的处理方式？ 1 用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的
什么是虚拟DOM
黑山老妖的小站
08-11 3万+
什么是虚拟DOM？ virtual DOM 虚拟DOM，用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。 虚拟 dom 是相对于浏览器所渲染出来的真实 dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。 这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），
React
zhutou1280的博客
03-13 1263
react 中的 key 的作用 Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。 你对虚拟 dom 和 diff 算法的理解，实现 render 函数 虚拟 DOM 本质上是 JavaScript 对象,是对真实 DOM 的抽象表现。 状态变更时，记录新树和旧树的差异 最后把差异更新到真正的 dom 中 render 函数: 根据 tagName 生成父标签,读取 props，设置属性，如果有 content，设置 innerHtml 或 innerText, 如果存在
虚拟DOM和DIFF算法的理解
big_asm的博客
06-11 555
什么是虚拟DOM 当我们更新了state里的值之后，render方法就会被重新调用渲染ui，显然这样会极大地消耗性能，很不爽，所有react出了个虚拟dom，react在虚拟dom实现了diff算法，当render再次渲染的时候他不会去把整个render方法去重新渲染，他会去一一对应，发现不一致的话就会停止查找，取而代之替换掉，所以说react并不是渲染整个dom树，虚拟dom就是js数据结构， 虚拟DOM 谈谈虚拟DOM的底层原理 state数据 jsx模板 数据+模板+生成虚拟DOM（虚拟DOm就是个
Vue中虚拟DOM的Diff算法简析与key值的作用
qq_41618957的博客
03-23 441
我们在使用vue的过程中，知道vue为了提高网站的整体性能使用的是虚拟dom的方法那我们一步步来分析 什么是虚拟dom： 虚拟 DOM 就是为优化浏览器性能问题。在网页中若一次操作中有 10 次更新 DOM 的动作： 真实DOM会每更新一次就操作一次dom，浏览器会接连更新10次，以最后一次去覆盖之前的渲染。 **虚拟 DOM **不会立即操作 DOM，而是将这 10 次更新的内容保存到本地一个 ...
虚拟 dom
lk19910323的博客
04-26 272
虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。 如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom 如果组件内有响应的数据，数据发生改变的
VUE框架优化 - Render渲染 diff算法 -立哥开发
weixin_45806384的博客
04-30 306
//剑气纵横三万里 //一剑光寒九百州 import { diff } from './diff'; import { createElement, patch } from './patch'; function flatten(arr) { return function h(type, props, ...children) { props = props || {}; return { type, props, children: flatten(children) }...
深入理解虚拟DOM以及diff算法
zhuzhufei9035的博客
06-18 226
1.什么是虚拟DOM   用JS来模拟DOM结构，将DOM的变化放在JS层来做。换而言之，vdom就是JS对象 2.基本过程 用 JS 对象模拟 DOM 树 比较两颗虚拟DOM树的差异–diff算法 将两个虚拟DOM对象的差异应用到真正的DOM树 3.虚拟DOM真的能提升性能吗？   使用虚拟 DOM，在DOM 阶段操作少了通讯的确是变高效了，但代价是在 JS 阶段需要完成额外的工作（diff计算），这项额外的工作是需要耗时的！   虚拟DOM并不是说比原生DOM API的操作快，而是说不管数据怎么变化
React Native探索（四）：虚拟DOM Diff算法解析
Louis的专栏
01-08 4040
React中最神奇的部分莫过于虚拟DOM，以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷 新”整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经做到足够透明，在实际开发中我们基本无需关心 虚拟DOM是如何运作的。然而，作为有态度的程序员，我们总是对技术背后的原理充满着好奇。理解其运行机制不仅有助于更好的理解React组
vue中render函数作用
最新发布
05-18
需要注意的是，render 函数一般不建议手写，而是使用模板或 JSX 来编写组件，因为模板和 JSX 更易读、易写、易维护。但是在某些特殊情况下，手写 render 函数也可以提供更高的灵活性和性能优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值