一，关于Virtual DOM

真实的页面对应一个DOM树，传统的交互就是 DOM树 触发事件 -> 然后业务处理 ->操纵dom树。操作DOM性能消耗大，且繁琐，维护成本高。

于是 React把真实的DOM树转换成Javascript对象树，也就是Virtual DOM（我觉得可以表述成这样，不直接操作DOM，将DOM抽象成一个javascript对象树【dom元素可以表示成一个JS对象】，操作对象树更加友好）。用户不直接操纵DOM，通过Vitual DOM 去改变DOM。

说这样提升了性能，提升在哪里了呢？数据更新之后，就是APP（代表着我们的react APP或者Vue APP）包含的数据发生变化之后，React会去对这个对象树即Virtual DOM 与上一次做对比，对发生变化的部分做批量更新，这一步可以提升性能，React的生命周期方法shouldComponentUpdate也给我们提供了是否更新这个组件的入口。

二，数据更新（对比Vue）

React里面，比如一个父组件A 里面有子组件 B/C/D ,只要父组件A里面state（或者取自store，po主自己加的）里面的数据或者传递给子组件的props发生了变化，就会从新渲染整个组件树，A->B / C / D 就算改变的只是传递给B的数据，也会渲染整个组件树。

这一点其实不太友好，但是我们可以通过shouldComponentUpdate来进行判断，这个方法接收需要更新的props和state，让开发者自己判断是否数据发生了变化，如果发生了变化，则继续往下执行->componentWillUpdate->render->componentDidUpdate. 如果没有发生变化的话，则可以return false，这样就不再向下执行生命周期方法了。但是这样我们每一个子组件都需要去判断这个方法，略繁琐。

        Vue里面，这一点比较友好，底层本身帮我们做了这一层检测，相当于内部实现了这个componentShouldUpdate方法，如果父组件A的data或者mutation里面的数据发生了变化，但是只是与B相关，那么vue会自动re-render B组件，其他的C/D组件不会被从新渲染。当然你如果想通过数据变化做一些额外的操作，在B组件里面watch这个数据的变化，即可。

资料：《深入React技术栈》 1.1.2 / 1.5.2章节

转载于:https://www.cnblogs.com/dongguapifly/p/10627100.html

【javascript】关于react的Virtual DOM 与数据更新相关推荐

  1. [react] 你知道Virtual DOM的工作原理吗？

    [react] 你知道Virtual DOM的工作原理吗? Virtual DOM是什么:虚拟DOM是真实DOM的javascript对象的映射 Virtual DOM的工作原理:数据驱动视图更新这个 ...

  2. vue的Virtual Dom实现- snabbdom解密

    vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使 ...

  3. JavaScript是如何工作的：编写自己的Web开发框架 + React及其虚拟DOM原理

    摘要: 深入JS系列19. 原文:JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门 ...

  4. 从 0 到 1 实现 React 系列 —— 1.JSX 和 Virtual DOM

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  5. 基于Virtual DOM与Diff DOM的测试代码生成

    尽管是在年末,并且也还没把书翻译完,也还没写完书的第一稿.但是,我还是觉得这是一个非常不错的话题--测试代码生成. 当我们在写一些UI测试的时候,我们总需要到浏览器去看一下一些DOM的变化.比如,我们 ...

  6. 了不起的Virtual DOM(一)：起源

    前言 首先欢迎大家关注我的掘金账号和Github博客,也算是对我的一点鼓励,毕竟写东西没法获得变现,能坚持下去也是靠的是自己的热情和大家的鼓励. 之所以想写本系列文章的主要原因是将近一个月时间没有写点 ...

  7. Vue源码分析系列四：Virtual DOM

    前言 当我们操作Dom其实是一件非常耗性能的事,每个元素都涵盖了许多的属性,因为浏览器的标准就把 DOM 设计的非常复杂.而Virtual Dom就是用一个原生的JS对象去描述一个DOM节点,即VNo ...

  8. vue xunidom_vue的虚拟dom（Virtual DOM ）

    模板转换成视图的过程 在底层实现中Vue会将模板编译成渲染函数,当然我们也可以不写模板,直接写渲染函数,以获得更好的控制. 渲染函数:渲染函数是用来生成Virtual DOM的: VNode虚拟节点: ...

  9. 深度理解 Virtual DOM

    目录: 1 前言 2 技术发展史 3 Virtual DOM 算法 4 Virtual DOM 实现 5 Virtual DOM 树的差异(Diff算法) 6 结语 7 参考链接 1 前言 我会尽量把 ...

最新文章

  1. Linux高性能网络：协程系列09-协程性能测试
  2. ora-12514: tns: 监听程序当前无法识别连接描述符中请求的服务　问题解决
  3. workbench 手动提交事务_mysql实现事务的提交和回滚实例
  4. Linux配置手册（八）基于MySQL构建PHP环境
  5. Transformer原理解析——一种Open AI和DeepMind都在用的神经网络架构
  6. ThinkJS入门+实例（实现认证权限等基本功能）
  7. Docker-Docker-file构建Redis5.0.3镜像
  8. LeetCode-179:数组自动排序工具Arrays.sort()，比较器Comparator的正确打开方式
  9. C++ static、const和static const 以及它们的初始化
  10. DevOps使用教程 华为云（19）git diff查看刚刚更新的文件的差异
  11. 图书借阅系统UML建模
  12. 桌面存放linux文件无法删除,电脑桌面文件无法删除怎么办？
  13. R语言需要C语言基础吗,R语言入门(1)-初识R语言
  14. iscsi 远程连接磁盘
  15. 配置OSPF实现pc机互通小实验
  16. 几张趣图带你了解程序员眼中的世界
  17. 怎样用matlab把视频转gif动画,Matlab制作视频并转换成gif动态图的两种方法
  18. 人工智能训练师数加加标注培训系统正式上线
  19. crh寄存器_STM32的寄存器控制SDA_IN()/SDA_OUT()
  20. mysql 嵌套查询性能_mysql SQL优化之嵌套查询-遁地龙卷风

热门文章

  1. C++ 关于I/O
  2. U-Boot的常用命令详解
  3. 日历控件，可运行在XHTML1.0下
  4. HDOJ 1713 相遇周期 （最大公约数与最小公倍数）
  5. vue中常用的事件修饰符
  6. 通过字节流来代替链接来下载小文件
  7. location.reload() 和 location.replace()的区别和应用
  8. mysql——数据库事务（C#代码）
  9. xlwings，让excel飞起来！
  10. DXUT框架剖析（10）