为什么企业要建设自己的企业文化,浙江企业seo推广,设计开发建设网站平台,杭州seo文章目录 前言什么是fiber架构React Fiber的运行流程Fiber关键特性在没有fiber架构之前的react是什么样子的#xff1f;Fiber解决问题的核心#xff1f;后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;react.js #x1f431;#… 文章目录 前言什么是fiber架构React Fiber的运行流程Fiber关键特性在没有fiber架构之前的react是什么样子的Fiber解决问题的核心后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏react.js 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 什么是fiber架构 React Fiber 架构首次在 React v16.0 中引入这是在2017年9月26日发布的。该版本的发布标志着 React Fiber 架构的正式推出为 React 应用程序的性能和交互体验带来了重大改进。React Fiber 架构的引入使得 React 应用程序更具灵活性和可扩展性能够更好地处理大型应用程序的渲染和交互需求。 fiber其实指的一种数据结构它可以用纯JS对象来表示 Fiber是一个执行单元每次执行完一个执行单元React就会检查现在还剩多少事件如果没有事件就将控制权让出去 React Fiber的运行流程 Fiber关键特性
1.增量渲染
通过fiber可以把我们的一些渲染任务进行拆分均匀到每一帧里面去执行
2.暂停终止复用渲染任务
3.不同更新的优先级 更新的时候给我们需要更新的不同的任务赋予不同的优先级 高优先级的比如说是键盘输入事件之类的点击事件之类的这都是优先级比较高的因为我们希望我们点击或者键盘输入之后就能有一些交互效果。 低优先级比如是一些网络请求之类的 fiber除了有优先级之类的还允许我们对里面的任务进行插队 4.并发方面的新的基础能力
在我们的并发模式下React可以暂停高消耗非紧急的组件的渲染并聚焦再更加紧迫的任务中。比如说ui渲染始终保持应用和响应避免白屏卡顿等现象
在没有fiber架构之前的react是什么样子的
react的15版本分为两层
Reconclier协调器-- 找出需要更新的组件以及标识出如何更新Renderer渲染器 – 负责将变化后的组件渲染到页面上
执行react15的reconciler是stack-reconciler。即是采用递归形式工作的是同步的在生成虚拟dom树并diff过程中是无法中断的。这样在组件层级过深时会造成js执行时间过长浏览器无法布局和绘制造成丢帧。
根本原因 大量的同步计算任务阻塞了浏览器的 UI 渲染。默认情况下JS 运算、页面布局和页面绘制都是运行在浏览器的主线程当中他们之间是互斥的关系。如果 JS 运算持续占用主线程页面就没法得到及时的更新。当我们调用setState更新页面的时候React 会遍历应用的所有节点计算出差异然后再更新 UI。整个过程是一气呵成不能被打断的。如果页面元素很多整个过程占用的时机就可能超过 16 毫秒就容易出现掉帧的现象。 Fiber解决问题的核心 其实就是是将运算切割为多个步骤分批完成。也就是说在完成一部分任务之后将控制权交回给浏览器让浏览器有时间进行页面的渲染。等浏览器忙完之后再继续之前未完成的任务。 旧版 React 通过递归的方式进行渲染使用的是 JS 引擎自身的函数调用栈它会一直执行到栈空为止。而Fiber实现了自己的组件调用栈它以链表的形式遍历组件树可以灵活的暂停、继续和丢弃执行的任务。实现方式是使用了浏览器的requestIdleCallback这一个 API。 requestIdleCallback window.requestIdleCallback()会在浏览器空闲时期依次调用函数这就可以让开发者在主事件循环中执行后台或低优先级的任务而且不会对像动画和用户交互这些延迟触发但关键的事件产生影响。函数一般会按先进先调用的顺序执行除非函数在浏览器调用它之前就到了它的超时时间。 React 框架内部的运作可以分为 3 层
Virtual DOM 层描述页面长什么样。Reconciler 层负责调用组件生命周期方法进行 Diff 运算等。Renderer 层根据不同的平台渲染出相应的页面比较常见的是 ReactDOM 和 ReactNative。 这次改动最大的当属 Reconciler 层了React 团队也给它起了个新的名字叫Fiber Reconciler。这就引入另一个关键词Fiber。 为了便于大家区分以前的 Reconciler 被命名为Stack Reconciler。Stack Reconciler 运作的过程是不能被打断的 而 Fiber Reconciler 每执行一段时间都会将控制权交回给浏览器可以分段执行 为了达到这种效果就需要有一个调度器 (Scheduler) 来进行任务分配。任务的优先级有六种
synchronous与之前的Stack Reconciler操作一样同步执行task在next tick之前执行animation下一帧之前执行high在不久的将来立即执行low稍微延迟执行也没关系offscreen下一次render时或scroll时才执行 优先级高的任务如键盘输入可以打断优先级低的任务如Diff的执行从而更快的生效。 后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
