Skip to main content

双缓存技术

双缓存技术​

Q：能干啥？​

  • A：更快速的进行DOM更新。

Q：是啥？​

  • **在内存中构建（Fiber树）并直接替换（真实dom树）**的技术。

    双缓存中的Fiber树

    • current Fiber树：当前屏幕上显示内容对应的Fiber树
    • workInProgress Fiber树：正在内存中构建的Fiber树
    • 通过alternate属性连接

构建/替换流程​

示例

function App() {
  const [num, add] = useState(0);
  return (
    <p onClick={() => add(num + 1)}>{num}</p>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'));

mount（挂载时）​

  1. 首次执行ReactDOM.render会创建rootFiberNode和rootFiber。

    rootFiberNode：整个应用的根节点，只有一个。

    rootFiber：应用中可以多次调用ReactDOM.render渲染不同的组件树，所以会拥有不同的rootFiber

  2. 接下来进入render阶段在内存中依次创建workInProgress fiber并连接在一起构建workInProgress Fiber树。

    （图中右侧为内存中构建的树，左侧为页面显示的树）

  3. 将已构建完的workInProgress Fiber树在commit阶段渲染到页面。

    此时DOM更新为右侧树对应的样子。

    • rootFiberNode的current指针指向workInProgress Fiber树使其变为current Fiber 树。

Update（更新时）​

  1. 触发状态改变，这会开启一次新的render阶段并构建一棵workInProgress Fiber 树。

    • 其中很多workInProgress fiber的创建可以复用current Fiber树对应的节点数据。

  2. workInProgress Fiber 树在render阶段完成构建后进入commit阶段渲染到页面上。

    • 渲染完毕后，workInProgress Fiber 树变为current Fiber 树。

区分fiber Root 与 rootFiber​

fiber Root​

  • 表示Fiber数据结构对象，是Fiber数据结构中的外层对象

    • 是整个应用的根节点，它包含了应用挂载的目标节点信息，并且记录了整个应用更新过程中的各种信息。

  • 包含rootFiber，在current属性中，存储footFiber

  • 在React应用中FiberRoot只有一个。

  • 会记录应用的更新信息

rootFiber​

  • 表示组件挂载点对应的Fiber对象

    • 是Fiber Root的一部分，通常是应用中默认的组件挂载点

  • 指向fiberRoot，在rootFiber对象中的stateeNode，指向fiberRoot

  • 在React应用中可以有多个rootFiber，因为render方法可以被调用多次。

0%