一、react协调算法是什么实现的，为什么需要Fiber
React的协调算法（Reconciliation）是Fiber，它是一种新的协调器，用数据结构化的Fiber节点替代了之前的递归协调算法。Fiber架构的主要目标是实现增量渲染，将渲染工作分割成小单元，通过优先级调度来处理，避免长时间阻塞主线程，从而提升大型应用和复杂动画的性能。
为什么需要Fiber？
- 性能瓶颈：旧日的协调算法采用递归深度优先遍历，在更新大型组件树时会阻塞主线程，导致界面卡顿和响应缓慢。
- 提升用户体验：为了解决卡顿问题，React需要一种能够分割任务并允许中断的机制，以便优先处理高优先级更新，如用户输入和动画。
- 实现增量渲染：Fiber将虚拟DOM树的更新工作分割成多个Fiber节点（工作单元），允许React在多个帧中分散渲染任务，提高了渲染的灵活性和效率。
- 支持井发渲染：通过Fiber架构，React可以暂停、中止或重新安排任务，为不同类型的更新分配优先级，从而实现更平滑的并发渲染。
- 更好的错误处理：Fiber还通过将工作单元细化为Fiber节点，使得错误边界能够更方便地捕获和处理错误。
Fiber是如何实现的？
- 数据结构：Fiber是一种数据结构，一个Fiber节点代表一个工作单元，它包含了组件的状态和DOM的可变数据结构。
- 增量渲染：Fiber将渲染工作分割成小块，这些小块可以在多个帧中处理，并在必要时暂停、恢复或中止。
- 优先级调度：Fiber允许为不同的工作单元分配优先级，React的调度器会根据优先级来安排任务的执行顺序，确保高优先级的工作（如用户交互）能够优先执行，而低优先级的工作（如后台数据同步）可以被延后或中断。
什么是Fiber 架构，空闲渲染有了解吗
Fiber 架构是一种 React 的新架构，它将渲染任务分解成更小的、可中断的任务单元，并通过 时间分片 和 优先级调度 来利用浏览器空闲时间进行渲染。它解决了传统同步渲染会阻塞浏览器的问题，显著提升了应用性能和用户交互的流畅度。
②
Fiber 架构的核心概念
- 可中断渲染：传统渲染是同步且不可中断的，而 Fiber允许渲染过程在必要时暂停，并将控制权交还给浏览器来处理用户输入或其他高优先级任务。
- 时间分片：将大型渲染任务拆分成一系列小的、固定的时间段（例如5毫秒）来执行，并在每个时间片段结束后让出主线程。
- 优先级调度：Fiber 架构为不同的任务设置优先级，确保高优先级的任务（如用户输入）优先执行，从而提高响应速度。
- 数据结构：从数据结构的角度来看，Fiber 是一种表示组件树中每个节点的 JavaScript
对象，它通过 child、sibling和return 属性形成一个链表，用于组织和管理渲染任务。
空闲渲染
空闲渲染是 Fiber 架构带来的核心优势之一。
- 利用空闲时间：当浏览器没有其他任务需要执行时，Fiber 架构就会在空闲时间执行渲染任务的下一个小单元。可以使用requestIdleCallback(callback)来实现
- 提升用户体验：通过这种方式，渲染工作可以在用户交互之间、在用户可察觉不到的后台进行，避免了页面卡顿，使得应用在进行复杂渲染时依然保持流畅和响应迅速。
