用debugger从调用栈看React的setState的更新过程

抹茶冰淇淋
121 阅读1分钟

State是React能够识别的数据结构状态。

image.png

从上面的截图可以看出SiderBar组件中的State数据以及改变他们的setState方法，是以闭包的形式存放在SiderBar组件(本质也是一个函数)里的。

调用栈的变化过程

第一轮调用栈，创建state更新的调度任务

关键函数makeStateUpdateScheduled

image.png

第二轮调用栈，标记render开始

关键函数makeRenderStarted

image.png

第三轮调用栈，标记组件render开始

关键函数makeComponentRenderStarted

image.png

第四轮调用栈，Index组件执行

image.png

第五轮调用栈，setStrictMode,isStrictMode的值为true

image.png

image.png

第六轮调用栈，Index又执行

image.png

第七轮调用栈，又setStrictMode，isStrictMode的值为false

image.png

第八轮调用栈，标记组件render结束

关键函数makeComponentRenderStopped

image.png

第九轮调用栈，标记render结束

关键函数makeRenderStopped

image.png

第十轮调用栈，标记commit开始

关键函数makeCommitStarted

image.png

第十一轮调用栈，标记layoutEffect开始

关键函数makeLayoutEffectsStarted

image.png

第十二轮调用栈，标记layoutEffect结束

关键函数makeLayoutEffectsStopped

image.png

第十三轮调用栈，hook.onCommitFiberRoot被调用

关键函数hook.onCommitFiberRoot

image.png

第十四轮调用栈，标记commit结束

关键函数makeCommitStopped

image.png

信息汇总

  1. 从调用栈方法可以看出，state变化，react并不是立即更新，而是创建了调度任务，在浏览器空闲时才执行更新
  2. 先更新了一些状态信息，接下来组件函数才会执行，创建新的Element
  3. 先是render阶段(找到变化的元素)，再到commit阶段(执行变化过程)
  4. useLayoutEffect 将会在浏览器重新绘制视图前执行
avatar
文章
阅读
粉丝