(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. day43 mysql 基本管理,[破解密码以及用户权限设置]以及慢日志查询配置

    配置文件:详细步骤, 1,找到mysql的安装包,然后打开后会看到一个my.ini命名的程序,把它拖拽到notepad++里面来打开,(应该是其他文本形式也可以打开,可以试一下),直接拖拽即可打开该文 ...

  2. 反射-Emit

    一.Emit Emit,可以称为发出或者产出.在Framework中,与Emit相关的类基本都存在与System.Reflection,Emit命名空间下.可见Emit是作为反射的一个元素存在,反射可 ...

  3. git branch & checkout fetch 的使用和冲突解决

    git branch & checkout fetch 的使用和冲突解决 branch git branch 查看本地分支 git branch -v    查看本地分支的具体信息(commi ...

  4. 更新pip和setuptools

    python -m pip install -U pip setuptools

  5. 【python】TCP/IP编程

    No1: [TCP] 客户端 import socket s=socket.socket(socket.AF_INET,socket.SOCK_STREAM) s.connect(('www.sina ...

  6. BeagleBone Black 从零到一 (2 MLO、U-Boot) 转

    文章原址:jexbat.com/categories/BeagleBone/ 什么是 U-Boot 熟悉嵌入式开发的应该都听过它,U-boot 就是启动系统前的一段引导程序,虽然是引导程序,但是功能非 ...

  7. C# 使用PrintDocument 绘制表格 完成 打印预览

    C# 使用PrintDocument 绘制表格 完成 打印预览 DataTable   经过不断的Google与baidu,最终整理出来的打印类 主要是根据两个参考的类组合而成,稍微修改了一下,参考代 ...

  8. 在Node.js中在保持目录结构的情况下压缩指定目录

    最近在做一个文件升级的功能,需要从下载服务器中指定目录下的文件.在学习了zlib后发现这个模块达不到这个功能 在查找资料后发现后发现 archiver 模块很好用,不过我也发现大部分中文资料没有如果查 ...

  9. Spring使用笔记（一）Spring简介

    Spring简介 Spring丰富的功能的底层都依赖于它的两个核心特性: 1.依赖注入(dependency injection, DI): 每个对象负责管理与自己协作的对象(即它所依赖的对象)的引用 ...

  10. Java笔记（七）HashMap和HashSet

    HashMap和HashSet 一)HashMap 1.Map接口 interface Map<K,V> { int size();//查看Map中的键值对个数 boolean isEmp ...