简谈对虚拟Dom的理解
Posted zhangjixiang123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简谈对虚拟Dom的理解相关的知识，希望对你有一定的参考价值。
简单说一下我自己对虚拟DOM的理解。。。。
由于 jquery+es6模板字符串（渲染dom）=》真实的渲染 性能巨差
所以 为了提高性能虚拟DOM就是把真实的DOM转成JS 对象树 虚拟DOM创建以后（也就是componentWillMounted完成的时候 就创建了这个源树）根据组件内部的state 父组件的props 以及redux 的全局状态的更新 导致产生新的js对象树（就是目标树） 通过diff比较算法来比较两颗树的不同 把不同的节点在DOM树上渲染一下
diff算法是逐层比较 发现相同的就保留 发现删除的就删除 发现新增的就添加 这层比较把复杂度由O(n^3)降低到O（n^1）这个逐层比较会带来新的问题 1.如果这个变化比较复杂 2.兄弟节点需要排序插入的时候 这两种都是低效的 react产生两个假设 1.两个相同组件产生类似的DOM结构，不同的组件产生不同的DOM结构 2.对于同一层次的一组子节点 他们可以通过唯一的ID进行区分 事实上这两个假设成立1. 因为同一个组件的结构是稳定的 修改状态时只改变局部的内容 2.在用户开发时可以加一个id进行区分 所以diff算法是成功的
以上是关于简谈对虚拟Dom的理解的主要内容，如果未能解决你的问题，请参考以下文章