(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. mybatis相关知识

    @param解释为映射mapper.xml中的传参 mybatis中批量新增时用foreach循环,注意其中的collection属性,有list,数组 注意foreach中sql函数的写法,orac ...

  2. 从URL输入到页面展现到底发生什么

    前言 打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?先给大家来张总体流程图,具体步骤请看下文分解!   从URL输入到页面展现 总体来说分为以下几个过程: DNS ...

  3. vs2008单元测试

    调试是解决错误的过程,测试是发现软件缺陷的过程.每一个软件在交付使用时前都必须经过测试.软件测试是软件开发的重要组成部分,现在已经发展成专门的技术. 在消除了程序中的语法错误和运行错误后,程序仍然不能 ...

  4. 利用shell脚本实现nginx 的logs日志分割

    Nginx 是一个非常轻量的 Web 服务器,体积小.性能高.速度快等诸多优点.但不足的是也存在缺点,比如其产生的访问日志文件一直就是一个,不会自动地进行切割,如果访问量很大的话,将 导致日志文件容量 ...

  5. XamarinSQLite教程在Xamarin.Android项目中使用数据库

    XamarinSQLite教程在Xamarin.Android项目中使用数据库 在Xamarin.Android项目中使用预设数据库的具体操作步骤如下: (1)创建一个Xamarin.Android项 ...

  6. .NET控件名称缩写一览表 zz

    标准控件1 btn Button2 chk CheckBox3 ckl CheckedListBox4 cmb ComboBox5 dtp DateTimePicker6 lbl Label7 llb ...

  7. 块级元素或者行内元素在设置float属性之后是否改变元素的性质？

    块级元素使用float属性后,将其属性变成inline-block,不能改变其块级元素的性质,只是能有块级元素的特性,不独占一行,宽度不会占满父元素,和行内元素排列成一行 行内元素使用float属性后 ...

  8. ppt字体

    字体也需要设计.  太大众不太好.   ppt自带的字体样式 有毛笔风格的.vrinda. 其他的和这个字体样式差不多.选其中一个就可以了. 其他的个性样式就需要下载字体扩展了.作为经常做ppt的,还 ...

  9. [Python]mysql-python 安装错误 fatal error C1083: Cannot open include file: 'config-win.h': No such file or directory

    需要安装mysql connector 前往 https://dev.mysql.com/downloads/connector/python/ 下载 选择Platform independence, ...

  10. 图的封装（C++）

    一. 问题说明 1.问题的简单描述 将图和网的的创建和基本操作分封装到class 用来熟悉此种数据结构和基于这种数据结构上的基本算法 采用VS2010编译环境 2.工作安排 二. 源代码 1.文件st ...