React Fiber

React Fiber 是 React 16 中引入的一种重新设计的协调机制，是一种架构设计，旨在提高 React 应用程序的性能和用户体验。

在 React 之前，React 的协调机制是基于递归的。当组件更新时，React 会通过递归调用组件的生命周期方法来更新组件树。但是，这种方式存在一些问题，比如在处理大型组件树时可能会导致长时间的阻塞，影响用户体验。

Fiber 的目标是解决这些问题，它通过 将协调过程分解成可中断的小任务（即 fiber），并使用优先级调度算法来决定哪些任务优先执行，任务随时能够停止，恢复。停止恢复的时机取决于当前的一帧（16ms）内，还有没有足够的时间允许计算，从而实现了更灵活的控制和更高的性能。

优先级调度算法，优先级从高到低:

• 立即执行：最高优先级的任务，通常用于处理用户输入或者动画等需要立即响应的任务。

• 高优先级：高优先级的任务，用于处理需要快速完成但不需要立即响应的任务。

• 普通优先级：普通优先级的任务，用于处理大多数常规的更新任务。

• 低优先级：最低优先级的任务，用于处理一些不那么紧急的任务，如预加载数据等。

Fiber 节点拥有 parent, child, sibling 三个属性，分别对应父节点， 第一个孩子， 它右边的兄弟， 有了它们就足够将一棵树变成一个链表， 实现深度优化遍历。

React Fiber 的关键特点包括：

• 可中断性：将协调过程分解成可中断的小任务（fiber），使得 React 能够在执行任务时根据优先级中断当前任务，并转而执行其他任务，从而更好地响应用户交互和保持良好的用户体验。

• 增量渲染：React Fiber 可以在多次更新中逐步完成渲染过程，使得应用程序可以更快地响应用户输入，并且在每次更新之间仍然保持良好的响应性能。

• 优先级调度：React Fiber 使用优先级调度算法来确定哪些任务应该优先执行，以确保关键任务（如用户输入和动画）能够及时得到处理，从而提高用户体验。