Open sufuwang opened 1 year ago
类似于计算机内部的寄存器和内存，React 内部也有着两块存储 Fiber Tree 的区域
对于生产者和消费者供需不一致的场景，双缓存是很好的优化手段。Fiber 架构中同时存在两棵 Fiber Tree，一棵是 “真实 UI 对应的 Fiber Tree” ，可以理解为前缓冲区，另一棵是 “正在内存中构建的 Fiber Tree”，可以理解为后缓冲区。
假设项目中仅存在一次挂载行为
ReactDOM.createRoot(rootElement).render(<App />)
在页面渲染前，React 会构建一个 FiberRootNode ，它会指向两个 Fiber Tree，FiberRootNode 的 current 指针指向前缓冲区，另一棵则是后缓冲区。前/后缓冲区是相对概念，两块内存的其中一个既可以做前缓冲区，也可以做后缓冲区
挂载 React 组件时，React 内部存在两个 Fiber Tree，一个是 HTML 中定义的目标 DOM 元素（前缓冲区），另一个是入口文件定义的根 React 组件（后缓冲区），挂载行为就是将 FiberRootNode 的 current 指针指向根 React 组件。更新 React 组件时，与挂载时的逻辑一致，也是前后缓冲区的切换
概述
双缓存机制
类似于计算机内部的寄存器和内存，React 内部也有着两块存储 Fiber Tree 的区域
假设项目中仅存在一次挂载行为
在页面渲染前，React 会构建一个 FiberRootNode ，它会指向两个 Fiber Tree，FiberRootNode 的 current 指针指向前缓冲区，另一棵则是后缓冲区。前/后缓冲区是相对概念，两块内存的其中一个既可以做前缓冲区，也可以做后缓冲区
挂载 & 更新
挂载 React 组件时，React 内部存在两个 Fiber Tree，一个是 HTML 中定义的目标 DOM 元素（前缓冲区），另一个是入口文件定义的根 React 组件（后缓冲区），挂载行为就是将 FiberRootNode 的 current 指针指向根 React 组件。更新 React 组件时，与挂载时的逻辑一致，也是前后缓冲区的切换