网站优化描述设置,东莞网站建设怎么做,靓号网站开发,免费下载安卓软件借鉴#xff1a; 「React深入」一文吃透虚拟DOM和diff算法 - 掘金 (juejin.cn)
虚拟dom、fiber、渲染dom、dom-diff - 掘金 (juejin.cn)
未阅读源码#xff0c;了解层面#xff0c;后续可以深入了解
1.虚拟DOM
①.结构上#xff1a;虚拟DOM比真实DOM轻很多
②.操作上 「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通过三大策略完成了优化
Web UI 中 DOM 节点跨层级的移动操作特别少可以忽略不计。拥有相同类的两个组件将会生成相似的树形结构拥有不同类的两个组件将会生成不同的树形结构。对于同一层级的一组子节点它们可以通过唯一 id 进行区分。
分别对应tree diff、component diff、element 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实现
