diff --git a/自顶向下学 React 源码/React 源码的碎片记录.md b/自顶向下学 React 源码/React 源码的碎片记录.md index 6efff4c..3ab81df 100644 --- a/自顶向下学 React 源码/React 源码的碎片记录.md +++ b/自顶向下学 React 源码/React 源码的碎片记录.md @@ -29,4 +29,4 @@ - createWorkInProgress 之后就开始 Fiber 的递归创建,也就是 beginWork 和 completeWork,可以小小的归结,beginWork 是在 Fiber 递的过程中不断地创建下一个子 Fiber 节点,而 completeWork 则是填充创建好的 Fiber - createWorkInProgress 的逻辑中,如果已经 alternate 存在,那么就会复用 Fiber,然后赋值同名参数,里边还会赋值 children - createWorkInProgress -> beginWork -> completeWork -- 首屏渲染时,会创建 Fiber 树的第一个节点 FiberNode,这个时候创建的 Fiber 树会被 FiberRootNode 的 current 指针指向,之后进入 createWorkInProgress 函数,会从 current 树的 alternate 属性中获取 workInProgress 的 FiberNode,由于首屏渲染,这个时候只存在一棵树那就是 current Fiber,这是就会创建有个新的 Fiber 节点作为 workInProgress 的 FiberNode,并赋值 current FiberNode 的同名属性,最后交由 beginWork 开始创建子 Fiber 节点,直到 Fiber 树完成生成,提交给 commit 阶段渲染到页面上,当第一次触发页面刷新,也会进入 createWorkInProgress,这是存在一个完备的 Fiber 树,也就是首屏渲染时生成的 workInProgress,但是在第一次页面更新,它已经是此次的 current Fiber 树,与首屏渲染时的 createWorkInProgress 不同,这次的 current Fiber 树的 FiberNode 已经存在,所有 \ No newline at end of file +- 首屏渲染时,会创建 Fiber 树的第一个节点 FiberNode,这个时候创建的 Fiber 树会被 FiberRootNode 的 current 指针指向,之后进入 createWorkInProgress 函数,会从 current 树的 alternate 属性中获取 workInProgress 的 FiberNode,由于首屏渲染,这个时候只存在一棵树那就是 current Fiber,这时就会创建有个新的 Fiber 节点作为 workInProgress 的 FiberNode,并赋值 current FiberNode 的同名属性,最后交由 beginWork 开始创建子 Fiber 节点,直到 Fiber 树完成生成,提交给 commit 阶段渲染到页面上,当第一次触发页面刷新,也会进入 createWorkInProgress,这是存在一个完备的 Fiber 树,也就是首屏渲染时生成的 workInProgress,但是在第一次页面更新,它已经是此次的 current Fiber 树,与首屏渲染时的 createWorkInProgress 不同,这次的 current Fiber 树的 FiberNode 已经存在,那么就不会创建新的 Fiber 节点,而是复用已有的 FiberNode,并赋值上同名属性,最后再交由 beginWork生成子 Fiber 节点,最后逻辑依旧,完成 FIber 树的生成之后 commit 渲染出页面,直到第二次渲染,这时两棵树 current Fiber 树和 WorkInProgress 树都已经存在 \ No newline at end of file diff --git a/自顶向下学 React 源码/奇怪的疑惑.md b/自顶向下学 React 源码/奇怪的疑惑.md index 131b98a..d4b811c 100644 --- a/自顶向下学 React 源码/奇怪的疑惑.md +++ b/自顶向下学 React 源码/奇怪的疑惑.md @@ -6,4 +6,5 @@ Components 会作为 React.createElement 的第一个参数,也就是 type 参数 - [ ] 什么是深度优先遍历 - [ ] 在 React 18 ,beginWork 这个方法似乎做了一些修改,具体修改了什么? -- [ ] 什么是按位或? \ No newline at end of file +- [ ] 什么是按位或? +- [ ] 为什么 React 要尽可能的复用 Fiber, 是因为创建新的 Fiber 非常消耗性能吗? \ No newline at end of file