真正吃透React知识链路与底层逻辑, Part5

目前正在学习深入浅出React【真正吃透React知识链路与底层逻辑】共23讲_哔哩哔哩_bilibili

虚拟DOM发展历史, 设计动机，React如何使用虚拟DOM

问题集

• 原始的diff算法为什么复杂度是
• React的diff算法做了哪些改进

 

发展历史

1. 原生html DOM + 少量JS
   1. 问题：
      1. DOM API太难用了
      2. 满足不了大量用户交互的场景
2. JQuery提供好用的DOM API
   1. 问题：将原生的DOM API打包成比较好用的形式，但是任然是在对DOM进行直接操作
3. 模板引擎开始引入数据驱动视图
   1. 问题：
      1. 应用场景局限于高效字符串拼接
      2. 由于每次都会将原有的DOM树拿掉再重渲染，渲染效率不如人意
   2. 图片节选自视频内容

    

4. React引入了VDOM，发扬数据驱动视图的思想
   1. 图片节选自视频内容

    

设计动机

能够在提供一个更高效的研发模式的同时还保持不错的性能

React选择虚拟DOM真的是为了更好的性能吗？

•  对比起模板渲染
  • 多出了diff找出新旧DOM树的差异
    • 这一步如果要做到完全需要的时间复杂度是, React进行了优化，将之缩小为了O(n)
    • 如果整个DOM树都发生变化，那么diff多出来的时间会让React比起模板渲染性能要差
  • 更新发生改变的DOM
    • 一般来说，操作DOM是非常耗时的。如果DOM发生的变化比较小，React会显著胜出
• 对比起原生DOM，JQuery，这个开发流程没法比较，比较性能会没有太大意义
  • 实现同样的功能，写的代码会更多，性能开发到极限会更好，但是有可能出现严重的bug，而且基本上最后也得到类似于React的东西

虚拟DOM解决的问题

研发体验

跨平台

 批量更新

一些状态的更新可以放在一起，然后只更新一次DOM