最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 面试官: 翻译翻译什么 TM 叫 react diff

    正文概述 掘金(禹)   2021-05-03   592

    回答要有逻辑, 从 react 渲染设计思想, 面临的问题, diff 算法原理, 有哪些问题, 可能解决的办法 角度出发

    浏览器性能瓶颈是 DOM, react 是采用虚拟 DOM 思想, 当需要重新渲染, 将新旧 DOM 数快照对比,找出变化的部分,尽可能较少 DOM 的变更, 而将一个树形结构转化成另一种树形结构, 通常算法复杂度是 On3 次方, 于是结合前端使用场景特征进行了算法优化

    1. 首选前端很少有节点跨层级移动
    2. 拥有相同类型的组件会生成相似的结构
    3. 对于同一层级节点, 他们可以通过唯一 ID 区分

    首先会一层层比较, (通过 updateDepth 控制), 假如同层发现不同,销毁 结点及其下面所有结点, 哪怕其子节点是可复用的

    然后同层级比较过程中, diff 提供了 插入/删除/移动三个操作, 而判断依据的唯一 ID 就是 标签类型, 或者组件的 key 属性. 通过唯一 key 可以判断新老集合中是否存在相同的节点, 如果存在相同节点, 会将新旧快照的索引进行对比, 新快照节点索引 > 旧快照节点索引,才需要进行移动操作。 脑补打扑克朝着一个方向码牌, 比如 J,K,Q, A -> J,Q,K,A 只需要把 K 移动到 Q 后面就成了一条龙了(我猜测他们的灵感就是来源扑克 hh)

    但这个朝着一个方向的算法存在一个问题, 假如是把最后一个节点移动到第一个节点, 但会是把前面一些节点移动到 最后一个节点后面. 所以要避免这个场景

    我猜测未来如果需要解决这个场景, 会增加双向 diff


    起源地下载网 » 面试官: 翻译翻译什么 TM 叫 react diff

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元