diff --git a/React 的源码深入/React Reconciler - Fiber 创建.md b/React 的源码深入/React Reconciler - Fiber 创建.md index 25b2d72..cccf794 100644 --- a/React 的源码深入/React Reconciler - Fiber 创建.md +++ b/React 的源码深入/React Reconciler - Fiber 创建.md @@ -3,7 +3,7 @@ > React 从 16 开始,对底层架构做了一次重构,和 15 不同,渲染 vdom 的时候一改以往的递归执行,引入了一个新的概念,叫做 Fiber,虽然最后渲染到页面的时候还是递归,但是 Fiber 的递归是可以中断的,根据优先级由浏览器优先执行任务,保证在大量视图需要更新的时候,浏览器仍然能保证快速的响应 在 React 中,视图的更新使用了双缓存的方式,也就是说在 React 运行时,同时有着两棵 Fiber 树,一颗是当前视图上的 Fiber 树,叫 current,另外一棵是存在内存当中的下一次视图更新时用的叫做 workInProgress,React 在构建时会创建整个 app 唯一的根 Fiber 节点,叫做 FiberRootNode,这个节点上有一个 current 指针,指向的是当前正在页面上显示的 Fiber 树也就是 current,当 workInProgress 递归生成完毕,指针会立即指向 workInProgress ,而旧的 current 就会在下一次渲染中变成 workInProgress ,就这样循环交替完成页面的递归渲染 -本次源代码解读的 DEMO 只用了最简单的 useState 做计数器修改触发页面刷新,并没有新增新的DOM 节点之外的其他操作 +本次源代码解读的 DEMO 只用了最简单的 useState 做计数器修改触发页面刷新,并没有新增新的DOM 节点之外的其他操作,第一次和第二次和之后页面刷新实际上都只是 useState 触发变化并在页面上显示计数内容出现变化 ## 首屏渲染 @@ -60,7 +60,7 @@ createInstance 会调用 createElement 方法创建一个 DOM 实例,并调用 还是交由 createWorkInProgress 这个函数,这个函数会从 current 中取出 alternate 属性,用于判断是否已经存在 WorkInProgress 树,在本次更新,当前的 current 就是上一次渲染的 WorkInProgress,首屏渲染完成之后,实际上只渲染完成了一棵树,但是这次的 WorkInProgress 并不会走等于 null 的逻辑,因为在首屏渲染的时候,那个还是 current 的 WorkInProgress 实际上已经有一个 Fiber 节点了,那就是 FiberNode ,所以在这次渲染,它也还是有那一个 FiberNode 的,所以会走不为空的逻辑:复用现有的 Fiber 节点,其他和首屏渲染是一样的,这里不多赘述 ### beginWork -第一次触发更新,进入这个函数的逻辑前边和首屏渲染是都是一样的,但是在判断组件是否发生修改的时候逻辑和首屏渲染并不同 +第一次触发更新,进入这个函数的逻辑前边和首屏渲染是都是一样的,但是在判断组件是否发生修改的时候逻辑和首屏渲染并不同,在首屏渲染,beginWork 会走到 switch 逻辑,并根据 Fiber tag 不用分别执行不同的 mount l逻辑,在这里会经过一些判断最终进入 attemptEarlyBailoutIfNoScheduledUpdate 这个函数,这个函数内部又有着一个 switch 逻辑,也是根据 workInProgress tag 属性分别进入不同的 case,在这个例子中进入的是 HostRoot 对应的 case ### 第二次触发更新