DOM和Diff算法你应该知道的那些事，快收藏！

      咱们在进行dom操做的时候可能会出现须要更新某一个dom元素，但若是不更新整个组件就没法生效，其实咱们使用diff算法配合虚拟dom便可实现，下面小千就来给你们介绍一下。

      虚拟DOM

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

      Diff算法

      执行过程

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

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

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

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

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

      代码演示

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

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

      初次渲染的DOM对象

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

      小结

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

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

      setState() 异步更新数据

      父组件更新致使子组件更新，纯组件提高性能

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

      虚拟DOM -> state + JSX

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

      以上就是关于dom和diff算法的介绍了，但愿能帮到你们！

      原文来自千锋教育：http://wh.mobiletrain.org/，转载请注明出处。