关于前端:什么是diff算法

咱们在进行 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 算法的介绍了，心愿能帮到大家。