Virtual-Dom算法

React的virtual Dom

React组件挂载:JSX/TSX ==>JavaScript对象==>真实DOM

无论是.jsx还是.tsx,都是先把组件中的render()方法返回的Html标签结构转化成JavaScript对象,生成
一个虚拟的DOM树,然后经历一系列的逻辑操作后,使用ReactDOM.render()(import * as ReactDOM from 'react-dom')方法将虚拟的DOM转化为真实的DOM树。

应用Virtual DOM算法的几个步骤:

  1. 用JavaScript对象结构表示DOM树的结构,然后用这个树构建一个真正的DOM树,并插入到文档中。
  2. 当状态变更的时候,重新构造一棵新的对象树(新的JavaScript树)。然后用新的树和旧的树进行比较,比较两棵树的差异
  3. 把比较后的得到的差异应用到之前构造的真正的DOM树上,这样视图就更新了。

创建virtual Dom的目的:

相对于直接操作页面的DOM,直接操作JavaScript对象(虚拟Dom树)处理起来更快,而且更简单。

通过对比缓存在内存中的新旧JavaScript对象树,我们可以获取到先后的差异,这样我么就可以针对这个明确的差异去修改对应的真实DOM结构,而不需要整体或者频繁的去改动真实的DOM结构。

比较两棵虚拟DOM树的差异(DIFF算法)

具体的Diff算法原理不在此讨论

DOM树的差异体现在对其操作上:

  1. 替换掉原来的节点,div ==> span
  2. 移动、删除、新增子节点
  3. 修改节点的属性,比如修改ClassName
  4. 对文本节点的文本内容修改

为什么要给节点添加唯一标识key:

进行react开发的时候,我们经常会在控制台看到未添加标识符key的警告。虽然大部分情况下,忽略该警告程序依旧可以正常运行。但是给每个节点添加一个唯一的key,则会在程序代码运行性能上提高很多。需要说明的是这个key不是给开发者使用的,是给react应用Virtual-Dom Diff算法时应用的。

针对列表节点的比较:

同一层节点中插入某个节点,比如在ABCDE五个节点中插入一个F节点使其变为ABCFDE。如果没有给每个节点绑定唯一的标识符key,那么更新过程则是将D变成FE变成D、最后再新增一个E。可以看到,React会逐个对节点进行更新,转换到目标节点,最后插入新增的节点,这里面涉及到的DOM操作非常多。而如果给每个节点绑定一个唯一的标识符key,那么React就能够找到正确的位置去插入新的节点。

同一层次的节点顺序调换,如果没有提供key,那么这里的节点顺序调整则是一个完全删除然后重建的过程。如果提供了key,那么React就能直接定位到正确的节点,从而进行顺序的调换及更新。

上面涉及到有无key的组件变化情况,可以通过组件进入不同的生命周期观察到。这也表明组件的生命周期与Virtual-Dom Diff算法是联系在一起的。

References

  • 如何实现一个Virtual Dom算法
  • React DOM Diff算法解析

你可能感兴趣的:(Virtual-Dom算法)