react框架做了什么事情？
首先我们都知道，react和vue框架都是MVVM框架，它们做了同样一件事情，就是让开发者可以只修改数据，视图自动更新。
react框架的视图更新是怎么保证自己不卡顿的呢？
首先，数据更新从而导致页面中展示的数据发生更新必然会引起浏览器进行刷新。而浏览器刷新间隔是1000ms/60HZ=16.6ms,在一次间隔中必须实现： js脚本执行——> 样式布局 ——> 样式绘制。
- js脚本执行：此阶段主要做的事情就是进行fiber树的比对、更新、生成新的fiber树，并编译出新的dom树
- 样式布局（回流）：将dom树和cssom树进行结合，并计算元素在页面中的布局
- 样式绘制（重绘重排）：绘制新的样式
如果在一次刷新中，js脚本没能执行完毕，则会出现掉帧，导致不流畅，具体表现是浏览器滚动不流畅，输入框不能及时响应。因此，在react中，为了阻止这一帧中只能执行js脚本，没办法执行样式布局和样式绘制，导致样式不能及时更新，于是限制js脚本持续执行任务。
具体做了什么优化呢？
- dom元素的更新，由同步更新变为异步更新
- 人机交互时的过渡状态下做异步请求，不加上loading状态过渡，让用户感知上认为是同步
- react和浏览器做了一个约定，预留了部分时间给react完成任务，如果，react的任务所需时间特别长，超出了预留时间。react会中断自己的工作，并把时间交回给浏览器，等待下一次的时间片去完成工作。
react是如何实现中断的呢？
传统的 React 渲染过程是基于递归的，称为"Stack Reconciliation"，它在递归过程中会阻塞 JavaScript 主线程，导致长时间的执行时间，从而影响用户体验。Fiber 架构通过引入一套可中断的渲染机制，将渲染任务划分为多个小任务单元，并允许在任务单元之间进行优先级排序和暂停/恢复操作，从而实现更好的控制和调度。
Fiber 架构的关键概念包括：
- Fiber 节点：表示组件树中的一个单元，每个 Fiber 节点对应一个组件实例或 DOM 节点。
- Fiber 树：由一组连接的 Fiber 节点构成的虚拟镜像树，与组件树相对应。
- 工作单元：指被分成较小单元的渲染任务，由 Fiber 节点表示。
- 协调器（Reconciler）：负责创建和更新 Fiber 节点，构建 Fiber 树。
- 调度器（Scheduler）：负责根据优先级和时间片分配算法，确定何时执行、暂停、终止或恢复渲染任务。
Fiber 架构的主要优势是：
- 提升用户界面的响应能力：通过将渲染任务划分为多个小单元，并让浏览器有机会在每个渲染单元之间进行其他工作，从而减少长时间的 JavaScript 执行造成的卡顿。
- 实现优先级排序和中断恢复：在 Fiber 架构中，可以根据任务的优先级动态调整任务执行的顺序，并且可以中断正在进行的任务并在稍后恢复，从而更好地响应用户交互和保证应用的流畅性。
总结来说，Fiber 是 React 中一种基于可中断渲染任务的架构，通过引入 Fiber 树和工作单元的概念，提高了 React 应用的性能和响应能力。
