(1) 把树形结构按照层级分解，只比较同级元素。
(2) 列表结构的每个单元添加唯一的 key 属性，方便比较。
(3) React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）
(4) 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
(5) 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

react diff 原理的更多相关文章

  1. React 源码剖析系列 － 不可思议的 react diff

      简单点的重复利用已有的dom和其他REACT性能快的原理. key的作用和虚拟节点 目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理. 本系列文章希望通过剖析 ...

  2. React Diff 算法

    React介绍 React是Facebook开发的一款JS库,用于构建用户界面的类库. 它采用声明式范例,可以传递声明代码,最大限度地减少与DOM的交互. 特点: 声明式设计:React采用声明范式, ...

  3. 【React】393 深入了解React 渲染原理及性能优化

    如今的前端,框架横行,出去面试问到框架是常有的事. 我比较常用React, 这里就写了一篇 React 基础原理的内容, 面试基本上也就问这些, 分享给大家. React 是什么 React是一个专注 ...

  4. 浅谈React工作原理

    浅谈React工作原理:https://www.cnblogs.com/yikuu/p/9660932.html 转自:https://cloud.tencent.com/info/63f656e0b ...

  5. React Diff算法一览

    前言 diff算法一直是React系统最核心的部分,并且由于演化自传统diff,使得比较方式从O(n^3)降级到O(n),然后又改成了链表方式,可谓是变化万千. 传统Diff算法 传统diff算法需要 ...

  6. react diff

    传统diff 通过循环递归对节点的依次对比,复杂度是O(n3) react diff react对传统diff进行了优化,将复杂度降为O(n) react基于这几个前提对diff进行了优化: 忽略跨层 ...

  7. Vue Virtual Dom 和 Diff原理(面试必备) 极简版

    我又来了,这是Vue面试三板斧的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念: 用js来模拟DOM中的节点.传说中的虚拟DOM. 再来一张图: 是不是一下子秒懂  没懂再来一张 ...

  8. react diff算法浅析

    diff算法作为Virtual DOM的加速器,其算法的改进优化是React整个界面渲染的基础和性能的保障,同时也是React源码中最神秘的,最不可思议的部分 1.传统diff算法计算一棵树形结构转换 ...

  9. 深入Vue2.x的虚拟DOM diff原理

    一.前言 Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom),关于双向绑定可以参阅木琴的文章<剖析Vue原理&实现双向绑定MVVM>,vdom是树状结构,其节点为vnod ...

随机推荐

  1. 上海市2019年公务员录用考试第一轮首批面试名单(B类)

    上海市2019年公务员录用考试第一轮首批面试名单(B类) 2019-03-12 设置字体:大 中 小 职位序号 注册编号 职位序号 注册编号 职位序号 注册编号 职位序号 注册编号 1910565 5 ...

  2. SpringMVC(十一) RequestMapping获取Cookie值

    可以在控制器方法中使用类似@CookieValue("JSESSIONID") String sessionID的方式,来获取请求中的Cookie的值. 样例控制器代码 packa ...

  3. 合并排序 java

    java  实现合并排序 package How; import java.io.BufferedReader; import java.io.BufferedWriter; import java. ...

  4. Java并发编程（十一）-- Java中的锁详解

    上一章我们已经简要的介绍了Java中的一些锁,本章我们就详细的来说说这些锁. synchronized锁 synchronized锁是什么? synchronized是Java的一个关键字,它能够将代 ...

  5. （Android数据传递）Service和Activity之间-- 借助BroadcastReceiver--的数据传递

    实现逻辑如下: 左侧为Activity中的执行逻辑,右侧为Service中的执行逻辑: /** * <功能描述> Service和Activity之间的数据交互:具体表现为: 1. 从Se ...

  6. php 生成xml文件

    <?php class Xml{        /*      *  $aData     要格式化的数组      *  $path      xml信息要写入的文件路径     *  $ve ...

  7. [jzoj]1729.blockenemy

    Link https://jzoj.net/senior/#main/show/1729 Description 你在玩电子游戏的时候遇到了麻烦...... 你玩的游戏是在一个虚拟的城市里进行,这个城 ...

  8. Django——分页

    必要属性和方法 per_page: 每页显示条目数量 count: 数据总个数 num_pages:总页数 page_range:页面范围,从1开始,例如[1,2,3,4]. page: page对象 ...

  9. Hibernate简答题

    简单题目 1.持久化对象的三种状态,代表含义. 自由状态(transient): 不曾进行持久化,未与任何Session相关联 持久化状态(persistent): 仅与一个Session相关联 游离 ...

  10. websocket 的客户端 websocket-sharp

    事实上, websocket-sharp 也包括服务端的实现,  还有  HTTP Authentication 的功能 http://sta.github.io/websocket-sharp/ h ...