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）的执行，从而更快的生效。

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力