如何计算Virtual Dom中真正变化的部分,这就需要diff算法。
Virtual Dom配合高效的diff算法,才能够快速的渲染改动的页面,而不会渲染整个页面。
策略:针对节点进行比较。不同层级的节点,只有创建和删除操作。
影响性能操作,建议不要进行DOM 节点跨层级的操作。
图示如下(create A →create B →create C →delete A
):
image
策略:
shouldComponentUpdate()
来判断该组件是否需要进行diff 算法分析(所以可以利用shouldComponentUpdate()
来优化组件性能)图示如下:
image
其提供三种操作方法:
注意:对于同一层级的一组子节点,它们可以通过唯一 id 进行区分(这就是为什么在批量创建同类型组件时需要添加
key
属性,并且建议将key
定义为有意义的唯一标示,而不是index
索引)。
对于列表节点顺序的调整其实也类似于插入或删除,如下图,从 shape5 转换到 shape6。
diff.png
即将同一层的节点位置进行调整。如果未提供 key,那么 React 认为 B 和 C 之后的对应位置组件类型不同,因此完全删除后重建。
Vue的patch算法如何处理子节点数组? Vue在处理children数组时,会循环遍历
newChildren
(新列表),每循环到一个子节点,就去 >oldChildern
(旧列表)中找和当前节点相同的那个旧子节点。
oldChildern
中找不到,就说明是新增节点,进行插入操作。oldChildern
未被匹配到的节点会被删除。 Vue渲染列表时,如果提供key
属性,那么,可以作为节点的唯一标识。那么在oldChildern
中找相> 同节点时,可以直接通过key
获取节点,无需通过循环来查找节点。
可见,Vue和React对于key
的使用并不相同