react中虚拟dom,diff,fiber - 初级了解

借鉴:
「React深入」一文吃透虚拟DOM和diff算法 - 掘金 (juejin.cn)

虚拟dom、fiber、渲染dom、dom-diff - 掘金 (juejin.cn)

未阅读源码,了解层面,后续可以深入了解

1.虚拟DOM

①.结构上:虚拟DOM比真实DOM轻很多

②.操作上:虚拟DOM比真实DOM性能高

③.流程上:一个页面如果有500次变化,没有虚拟DOM的就会渲染500次,而虚拟DOM只需要渲染一次,从这点上来看,页面越复杂,虚拟DOM的优势越大

2.虚拟DOM

2.1概念:一个对象

2.2.React中为组件大写原因:如果标签的首字母是小写,就会被认定为原生标签 ,反之就是React组件

2.3虚拟DOM优势:

①效率高,不用关注原生DOM,更关注业务层

②性能提升:**浏览器在处理DOM的时候会很慢,处理JavaScript会很快。**虚拟DOM减少真实DOM操作,提升性能。

③虚拟DOM不一定提升性能。虚拟DOM优势在于diff算法和批量处理策略。首次加载,比起原生DOM,虚拟DOM多了一层计算,消耗了性能 ,会比html慢

④兼容性和跨平台性

3.构建虚拟DOM

3.1 React.createElement

3.1.1 react自身可以防止xss攻击(跨站脚本攻击)

3.2 转换为真是DOM:虚拟DOM转化为真实DOM的这个过程实际上非常复杂,大体上可以分为四步: 处理参数批量处理生成html渲染html

4.diff算法

4.1 与传统diff算法相比复杂度从O(n^ 3) 转化为O(n)

4.2 diff策略

React通过三大策略完成了优化:

  1. Web UI 中 DOM 节点跨层级的移动操作特别少,可以忽略不计。
  2. 拥有相同类的两个组件将会生成相似的树形结构,拥有不同类的两个组件将会生成不同的树形结构。
  3. 对于同一层级的一组子节点,它们可以通过唯一 id 进行区分。

分别对应:tree diffcomponent diffelement diff

三 react fiber 是react16新增的更新机制,让react 更新过程可控,提升性能

在react v16之前更新组件只有两层,分别是:

  • Reconciler(调和器)------ 负责找出变化的组件;
  • Renderer(渲染器)------ 负责将变化的组件渲染到页面上; 缺点就是采用递归的方式去调和虚拟Dom且这个调和的过程不能被打断。如果是一个很大的项目,很容易卡住页面。 react v16+新增加了一层调度器。分别是:
  • scheduler(调度器)------ 负责调度任务的优先级,优先级高的任务有限执行。暂停其他任务。
  • Reconciler(协调器)------ 负责找出变化的组件:更新工作从递归变成了可以中断的循环过程。Reconciler内部采用了Fiber的架构
  • Renderer(渲染器)------ 负责将变化的组件渲染到页面上;

1.每个元素都有fiber对象对应,形成fiber树

2.react fiber的更新过程是碎片化的,一次更新会分成n个任务片。每个片执行完成后就将控制权给到调度器。

3.调度器查看有没有更高级任务(比如 alert,onclick等),如果有就执行更高级任务,没有久久继续执行fiber更新。该功能基于requestldeleCallback实现

相关推荐
脑袋大大的21 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0130 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆3 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui