React中的bailout

定义

react 中的 bailout 指的是当满足一定条件是,react判断组件更新前后没有变化,则使用上次生成的fiber树来作为本次更新的 fiber。命中 bailout 逻辑后将不会出发 render

Fiber

在 React15 及以前,Reconciler 采用递归的方式创建虚拟 DOM,递归过程是不能中断的。如果组件树的层级很深,递归会占用线程很多时间,造成卡顿。

为了解决这个问题,React16 将递归的无法中断的更新重构为异步的可中断更新,由于曾经用于递归的虚拟 DOM 数据结构已经无法满足需要。于是,全新的 Fiber 架构应运而生。

bailout 条件

同时满足以下 4 点后,会进入 bailout 逻辑

1. oldProps !== newProps

props 中的每一个属性都没有变化,引用是全新的。

2. context 的 value 没有变化

3. workInProgress.type === current.type

更新前后 fiber.type 是否变化,比如 div 是否变为 p

4. !includesSomeLane(renderLanes, updateLanes)

当前 fiber 上是否存在更新,如果存在那么更新的优先级是否和本次整棵 fiber 树调度的优先级一致,如果一致则进入 render 逻辑。

demo 链接