React Fiber 详解

why Fiber

React Fiber的引入主要基于以下几个方面的考虑：
性能提升：
传统React的更新过程是同步的，一旦开始更新就会阻塞浏览器的主线程，直到整个组件树更新完成。这在处理大型组件树或高频用户交互时，可能会导致界面卡顿和响应变慢。
Fiber通过将更新过程拆分为多个小任务（Fiber节点），允许在任务之间中断和恢复，从而避免了长时间的阻塞，提高了应用的响应性和性能。
优先级调度：
Fiber引入了优先级概念，使得React能够根据任务的优先级来动态调整执行顺序。高优先级任务（如用户交互）能够得到优先处理，从而提升了用户体验。
增量渲染：
Fiber实现了增量渲染，即只处理发生实际变化的部分，而不是像传统React那样遍历整个虚拟DOM树。这减少了不必要的计算和重绘，进一步提高了性能。
错误边界和调试支持：
每个Fiber节点都捕获它下面的错误，允许React展示一个回退UI且不致使整个应用崩溃，这增强了应用的健壮性。
Fiber为开发者工具和时间旅行调试提供了更好的支持，有助于开发者更高效地定位和解决渲染问题。
为未来特性奠定基础：
Fiber架构的引入为React引入新的特性（如并发模式、Suspense等）提供了基础。这些新特性将进一步提升React应用的性能和开发体验。
综上所述，React Fiber的引入是为了解决传统React架构中的性能瓶颈，提升应用的响应性和性能，并为未来特性奠定基础。通过引入Fiber架构，React在处理复杂和高频更新场景下的性能和用户体验方面取得了显著进步。

What Fiber

React Fiber是React 16版本中引入的一种新的协调引擎，用于处理组件的更新和渲染。以下是关于React Fiber的精简回答：
定义与目的：
React Fiber是对React核心算法的一次重新实现，旨在提高React应用的性能和交互能力。
它通过将渲染过程拆分成多个可中断的小任务，解决了传统React架构中渲染过程无法中断导致的性能瓶颈。
核心特性：
增量渲染：将渲染任务划分为小块，允许渲染中断和恢复，以便在任务中间可以中止，响应更高优先级的任务，然后再恢复。
优先级调度：使用优先级调度，通过定义不同优先级的任务队列来决定任务的执行顺序，确保高优先级的任务（如用户交互）能够优先处理。
可中断和恢复：由于任务被分割为小块，React Fiber具备了可中断和恢复的能力，使得应用在进行渲染的过程中可以更加灵活。
数据结构：
Fiber本质上是一个链表结构，每个Fiber节点代表一个工作单元，包含了组件的状态、属性和其他信息。
Fiber节点之间通过child、sibling、return等指针相互连接，构成了Fiber树，表示了组件树的结构。
工作原理：
当组件状态或属性发生变化时，React会调用更新函数，标记组件为需要更新状态。
React会根据新的状态或属性生成新的虚拟DOM树，并使用协调算法比较新旧两棵虚拟DOM树的差异。
根据协调算法的结果，React会更新Fiber树的相应节点，执行组件的生命周期方法和渲染函数，将更新后的组件树渲染到DOM中。
性能提升：
通过增量渲染和任务分片技术，React Fiber能够显著降低长时间渲染任务对用户体验的影响。
优先级调度和可中断恢复机制使得React应用能够更好地响应高优先级任务，提升整体性能和交互体验。
综上所述，React Fiber是React团队为了解决传统架构中的性能问题而引入的一种新的协调引擎，它通过增量渲染、优先级调度和可中断恢复等特性，显著提升了React应用的性能和交互能力。

How Fiber works

React Fiber是React 16及更高版本中引入的一种新的核心算法，旨在提升React应用的性能和可预测性。以下是React Fiber具体工作方式的详细解释：
1. Fiber树的构建
在组件渲染过程中，React Fiber会根据组件的层级关系构建一棵Fiber树。这棵Fiber树与传统的虚拟DOM树类似，但Fiber树的节点结构更为复杂，包含了更多用于协调渲染过程和优化的属性。
每个组件实例对应一个Fiber节点，Fiber节点不仅包含了组件的状态、属性，还包含了与其他Fiber节点的关系等信息。这些信息通过child、sibling和return等指针相互连接，形成了一种链表结构。
2. 调度阶段
React Fiber会根据一定的优先级和调度算法来确定哪些任务需要先执行。它引入了任务调度器（Scheduler），负责决定哪些任务优先级更高，应该先执行。
React Fiber会将大的任务拆分成多个小任务（称为“fiber”），并通过优先级调度将这些小任务合理地分配到空闲的时间片执行。这样可以确保在浏览器空闲时执行低优先级的任务，而高优先级的任务会立即执行。
React Fiber使用requestIdleCallback API 和 requestAnimationFrame API来调度任务，配合浏览器的帧率信息，确保在合适的时机执行任务。
3. 协调阶段
在协调阶段，React Fiber会比较新旧两颗Fiber树的差异，找出需要更新的部分。
通过Diff算法，React Fiber能够高效地处理不同类型的组件和层级关系，确保只有实际发生变化的部分才会被更新，从而减少了不必要的计算和重绘。
4. 提交阶段
在提交阶段，React Fiber将任务分割成小单元后，并行执行这些小单元的更新。
每个小单元执行完成后，React Fiber会根据更新的情况决定是否需要中断或继续执行下一个任务，从而实现增量渲染。
增量渲染允许渲染过程分多个小步骤完成，而不是一次性完成整个UI的更新。这样，在一次事件循环中，React可以根据剩余时间来决定处理多少工作量，避免了阻塞主线程导致页面卡顿。
5. 优先级和中断恢复
React Fiber为每个任务增加了优先级，高优先级的任务可以中断低优先级的任务执行，并在适当的时候恢复执行被中断的任务。这种调度方式使得React能够更灵活地处理任务，优先处理对用户体验影响更大的任务。
中断和恢复的能力使得React Fiber能够更平滑地处理动画和过渡效果，提供更好的用户体验。同时，它也为实现React的并发模式打下了基础，使得React能够在不阻塞主线程的情况下处理长时间运行的任务，如数据获取等。
6. 性能优化
React Fiber通过减少不必要的工作来提高性能。例如，在组件树的协调过程中，它能够跳过那些没有发生变化的部分，从而减少渲染的工作量。
它还提供了任务取消的能力，可以取消不必要的更新，进一步提高了应用的性能。
综上所述，React Fiber通过构建Fiber树、任务调度、协调阶段、提交阶段以及优先级和中断恢复等机制，实现了对React渲染过程的优化和性能提升。这些特性使得React Fiber更加适用于构建大型、复杂的应用，并提供了更好的用户体验。