Skip to content

对 Fiber 的理解

在 React 15 中通过 递归 的形式进行对比,找到需要更新的节点,并同步更新它,在这段时间一直占据着浏览器主线程,可能会给用户带来卡顿的感受(在渲染进程中,js线程和渲染线程是互斥的

在 React 15 以后引入了 Fiber 架构,将对比的过程变成了异步可中断的过程,让出浏览器的使用权,让浏览器处理更高优先级的事情

Fiber 的调和过程(Reconciler)由分成了 beginWork 阶段 和 completeUnitOfWork 阶段。

beginWork 阶段自顶向下,根据当前工作的 Fiber 节点最新的 React Element 子元素与旧 Fiber 节点进行对比,决定是否需要复用旧 Fiber 节点并标记 Fiber 节点是否有副作用。

compeleteUnitOfWork 阶段自底向上构建副作用链表,生成的 DOM 节点挂在 Fiber 的 stateNode 属性