浅析React虚拟DOM和Diff算法

  • Z时代
  • 2024-01-10
  • 分类：综合

react

  • React更新视图的思想是：只要state变化就重新渲染视图

  • 特点：思路非常清晰

  • 问题：组件中只有一个DOM元素需要更新时，也得把整个组件的内容重新渲染吗？ 不是这样的

  • 理想状态：部分更新，只更新变化的地方

  • React运用的核心点就是 虚拟DOM 配合 Diff 算法

虚拟DOM

  • 什么是虚拟dom：用js对象来表示页面上dom元素的的样式体现。

  • 虚拟dom的作用：高效更新页面，还有就是让react脱离了浏览器的概念。意味着只要是能支持js的地方都可以用到react，所以react是可以进行跨平台的开发。
    （因为虚拟DOM 是用js对象来模拟的，但是我们的js不光运行在 浏览器里边儿。还可以运行在 手机/桌面电脑/嵌入式 都可以运行js。如果虚拟DOM DOM-> js对象 ->不光可以模拟html标签 也可以模拟其他的手机模块（按钮/白板/嵌入式灯泡））

本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容。

Diff算法

执行过程：

  • 初次渲染时，React会根据初始化的state（model），创建一个虚拟DOM对象（树）

  • 根据虚拟DOM生成真正的DOM，渲染到页面

  • 当数据变化后(setState())，会重新根据新的数据，创建新的虚拟DOM对象（树）

  • 与上一次得到的虚拟DOM对象，使用Diff算法比对（找不同），得到需要更新的内容

  • 最终，React只将变化的内容更新（patch）到DOM中，重新渲染到页面

  • 怎么来高效更新页面的：就是在第一次渲染页面的时候生成一份初始的虚拟dom树，然后当数据改变之后，再生成一份虚拟dom树，然后根据新旧dom树进行对比，对比完成之后，把有区别的进行更新。

  • diff算法的作用就是：用来加快新旧虚拟DOM比较用的。

  • diff算法又是怎么去对比的：tree diff、component diff、element diff。

以上是 浅析React虚拟DOM和Diff算法 的全部内容， 来源链接： utcz.com/z/383378.html

回到顶部