一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，[点击查看活动详情](juejin.cn/post/708080… "juejin.cn/post/708080…
Fiber 是对 React 核心算法的重构，facebook 团队使用两年多的时间去重构 React 的核心算法，在React16 以上的版本中引入了 Fiber 架构，其中的设计思想是非常值得我们学习的。
为什么需要Fiber？
在浏览器中，页面是一帧一帧绘制出来的，渲染的帧率与设备的刷新率保持一致，一般情况设备的屏幕刷新率为 1s 60次，当每秒内绘制的帧数（FPS）超过60时，页面渲染是流畅的；而当FPS小于60时，会出现一定程度的卡顿现象。
React Fiber的执行流程
- 首先需要处理输入事件，能够让用户得到最早的反馈
- 接下来是处理定时器，需要检查定时器是否到时间，并执行对应的回调
- 接下来处理 Begin Frame（开始帧），即每一帧的事件，包括 window.resize、scroll、media query change 等
- 接下来执行请求动画帧 requestAnimationFrame（rAF），即在每次绘制之前，会执行 rAF 回调
- 紧接着进行 Layout 操作，包括计算布局和更新布局，即这个元素的样式是怎样的，它应该在页面如何展示
- 接着进行 Paint 操作，得到树中每个节点的尺寸与位置等信息，浏览器针对每个元素进行内容填充
- 到这时以上的六个阶段都已经完成了，接下来处于空闲阶段（Idle Peroid），可以在这时执行 requestIdleCallback 里注册的任务。
什么是Fiber
Fiber 可以理解为是一个执行单元，也可以理解为是一种数据结构。
Filber就是把一个大任务分成了很多小任务，一个小任务的执行必须是一次性完成的，不能出现暂停，且小任务执行完成后可以移交控制权给浏览器从而去响应用户，而不是像以前一样等待大任务执行完成后再响应用户
