什么是diff算法？

Posted 2021-06-18 技术永远的神

我们在进行dom操作的时候可能会出现需要更新某一个dom元素，但如果不更新整个组件就无法生效，其实我们使用diff算法配合虚拟dom即可实现。

  虚拟DOM

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

虚拟dom

  Diff算法

  执行过程

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

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

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

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

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

diff算法

  代码演示

  组件render()调用后，根据状态和JSX结构生成虚拟DOM对象(renderwww.sangpi.com()方法的调用并不意味着浏览器进行渲染，render方法调用时意味着Diff算法开始比对了)

  示例中，只更新p元素的文本节点内容

  初次渲染的DOM对象

代码演示

  数据更新之后的虚拟DOM对象

页游代码演示2

  工作角度：应用第一，原理第二

  原理有助于更好的理解React的自身运行机制

  setState() 异步更新数据

  父组件更新导致子组件更新，纯组件提升性能

  思路清晰简单为前提，虚拟DOM和Diff保效率（渲染变化的组件）

  虚拟DOM -> state + JSX

  虚拟DOM最大的特点是 脱离了浏览器的束缚，也就是意味着只要是能支持js的地方都可以用到react，所以为什么说react是可以进行跨平台的开发

  以上就是关于dom和diff算法的介绍了，希望能帮到大家。