react 初体验

React核心:虚拟DOM 和 Diff算法

1.2  简单了解虚拟DOM?

React将DOM抽象为虚拟DOM,虚拟DOM其实就是用一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率。

为什么用虚拟DOM?  

当DOM发生更改时需要遍历DOM对象的属性,  而原生DOM可遍历属性多达200多个个, 而且大部分属性与渲染无关, 导致更新页面代价太大。

虚拟DOM的处理方式?

1) 用 JS对象结构表示 DOM 树的结构,然后用这个树构建一个真正的 DOM 树,插到文档当中。

2)当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异。

3) 把记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了。

1.3 简单了解Diff算法?

最小化页面重绘

当我们使用React在render() 函数创建了一棵React元素树,在下一个state或者props更新的时候,render() 函数将会创建一棵新的React元素树。

React将对比这两棵树的不同之处,计算出如何高效的更新UI(只更新变化的地方),此处所采用的算法就是diff算法。

猜你喜欢

转载自www.cnblogs.com/edczjw-Edison/p/12909488.html