虚拟DOM和diff算法(React学习笔记_08)

虚拟DOM和diff算法

React更新视图的思想是：只要state变化就重新渲染视图。组件中只有一个DOM元素需要更新的时候，不会把整个组件的内容重新渲染到页面中，只是部分更新，只更新变化的地方。 这就涉及到虚拟DOM配合Diff算法。

虚拟DOM：本质上就是一个JS对象用来描述在屏幕上看到的内容(UI)。

image

虚拟DOM和Diff算法执行过程：

1, 初次渲染的时候，react会根据初始state创建一个虚拟DOM对象(树)，根据虚拟DOM生成真正的DOM渲染到页面中
2，党数据变化后(setState()), 重新根据新的数据，创建新的虚拟DOM对象(树)，与上一次得到的虚拟DOM对象，使用Diff算法对比(找不同)，得到需要更新的内容。
3，最终，react只将变化的内容更新(patch)到DOM中，重新渲染到页面。

• 组件render()调用后，根据状态和JSX结构生成虚拟DOM对象。
• render方法调用仅仅说明要进行Diff算法

React原理总结：

• 原理有助于我们更好的理解React自身的运行机制
• setState是异步更新数据的
• 父组件更新导致子组件更新，纯组件提升性能
• 思路清晰简单位前提，虚拟DOM和Diff保效率
• 虚拟DOM：可以看成是由state + JSX共同生成的用来描述页面结构的JS对象
• 虚拟DOM的真正价值不是性能，而是让react脱离了浏览器的束缚。虚拟DOM仅仅是一个js里面的对象，只要能运行js的环境就可以运行react，这就给react可以做跨平台的应用提供了保障。

---------- 关注公众号，参与免费抽奖--------------

image