hooks的一个更新流程

·  阅读 71

调 用 useState 返 回的第二个参数内部调用的就是 dispatchAction。dispatchAction内部会创建一个update对象,这个对象会赋值 给fiber节点(当前触发更新的)。fiber对应是app这个函数组件。fiber会传给scheduleUpdateOnFilber函数,调度这次更新,然后这个fiber就会跟其他的fiber抢优先级,谁优先级高,就会先进去render阶段,diff算法,看哪些dom要变化。然后就会进入commitRoot,commitRoot传的参数是root,root是fiberRootNode,也是整个应用的根节点,root.current是当前应用的根节点,也就是ReactDom.render(,rootEl)对应的这个应用的跟节点,root.current.firstEffect是本次要执行更新的节点有哪些,它是一个链表,它上边有一个nextEffect字段,指下一个要更新的节点,要是还是下下个,就下一个对象的nextEffect就指向下下个。从而形成一个链表。遍历这个链表,就会知道有哪些dom要执行更新操作。

image.png

image.png

image.png

image.png

image.png

image.png

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改