关于前端:什么是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算法的介绍了，心愿能帮到大家。