react diff
发布时间:2020-12-15 16:16:50 所属栏目:百科 来源:网络整理
导读:传统diff 通过循环递归对节点的依次对比,复杂度是O(n3) react diff react对传统diff进行了优化,将复杂度降为O(n) react基于这几个前提对diff进行了优化: 忽略跨层级操作,因为DOM节点跨层级操作很少。 不同类的组件,则会生成不同的树形结构,相同类的组
传统diff
react diff
react基于这几个前提对diff进行了优化:
1 tree diff只会对相同层级的DOM节点进行比较,只需要一次遍历,便可以完成整棵树的遍历。如果节点不存在,则该节点及其子节点都会被删掉,对于不同层级的节点,只有创建和删除操作。 2 component diff
3 element diff当节点处于同一层级,可能除夕只需要对这些节点进行移动,不需要每次都删除创建,react剔除添加唯一key来区分。react通过判断key是否存在相同节点,如果存在,再进行判断进行移动操作。不存在再进行相应的创建删除。 与vue的diff区别
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |