zoukankan      html  css  js  c++  java
  • react diff

    传统diff

    通过循环递归对节点的依次对比,复杂度是O(n3)

    react diff

    react对传统diff进行了优化,将复杂度降为O(n)

    react基于这几个前提对diff进行了优化:

    • 忽略跨层级操作,因为DOM节点跨层级操作很少。
    • 不同类的组件,则会生成不同的树形结构,相同类的组件,会生成相似的树形结构。
    • 对同一层级的一组子节点,可以通过唯一key进行区分。

    1 tree diff

    只会对相同层级的DOM节点进行比较,只需要一次遍历,便可以完成整棵树的遍历。如果节点不存在,则该节点及其子节点都会被删掉,对于不同层级的节点,只有创建和删除操作。

    2 component diff

    • 针对同类型组件,按照tree diff策略对比。如果开发人员确切知道virtual DOM没有变化,react提供的shouldComponentUpdate()方法可以直接省去tree diff。
    • 针对不同类型组件,则直接判断该组件为dirty component,从而替换整个组件下的所有子节点。

    3 element diff

    当节点处于同一层级,可能除夕只需要对这些节点进行移动,不需要每次都删除创建,react剔除添加唯一key来区分。react通过判断key是否存在相同节点,如果存在,再进行判断进行移动操作。不存在再进行相应的创建删除。

    与vue的diff区别

    • 判断2个节点是否相同:vue认为className不一样,就不同,react则认为相同,只是属性不同,只需要更新其属性。
    • 同一层级对比:Vue从两端至中间对比,react从左至右对比。react策略存在短板,如果一个集合只吧最后一个移到第一个,react会移动前面所有节点,vue只移动最后一个节点到最前面。
  • 相关阅读:
    智能聊天机器人——基于RASA搭建
    十分钟学会写shell脚本
    浅谈并发并行异步同步
    C/S系统实现两数求和(非阻塞+epoll+心跳包检测用户在线状况+滚动日志+配置文件.)
    编程之美第一篇 01分数规划
    欧拉函数
    奇妙的算法之LCS妙解
    N种方法妙讲LIS算法
    基于FeignClient提供简单的用户查询服务
    SpringCloud简介
  • 原文地址:https://www.cnblogs.com/yadiblogs/p/11129206.html
Copyright © 2011-2022 走看看