Skip to content

Latest commit

 

History

History
43 lines (28 loc) · 2.07 KB

如何触发更新 c77c8ec4c7cf4133bb150af67b70a186.md

File metadata and controls

43 lines (28 loc) · 2.07 KB

如何触发更新

常见的触发方式

首次加载

ReactDom.createRoot().render(或者老版的ReactDom.render)

this.setstate

usestate的dispatch

更新机制的组成部分

  1. 代表更新的数据结构 —update
  2. 消费update的数据结构 —updateQueue

React维护的更新队列的概念和发布订阅中心有点类似。组件状态的更新会被加入更新队列,然后React会异步地去消费这个队列,更新组件的状态。

// 更新结构
export interface Update<State> {
    action: Action<State>;
}
// 更新队列
export interface UpdateQueue<State> {
    shared: {
        pending: Update<State> | null;
    };
}

以上是更新Update和UpdateQueue的结构,

在react初次render时,会由宿主环境包调用createContanier创建一个hostRootFiber hostRootFiber fiberNode节点中最高级,FiberRootNode也会被创建,FiberRootNode不是FiberNode节点,而是FiberRootNode节点,它的current指向hostRootFiber ,反之,hostRootFiber 的stateNode指向FiberRootNode(如下图)

每个FiberNode节点都有一个updateQueue属性,在reactDom.createRoot(dom节点)时,也就是源码中调用createContanier时,会给hostRootFiber 的创建一个UpdateQueue的结构对象

在render时,也就是源码中调用updateContanier时会取传入进来的(一般就是<APP/>) 创建一个update结构,与 hostRootFiber (也就是由的return指向,但此时并没有明确将对应到fiber,自然也就没有return指向)的updateQueue进行绑定

判定完成之后会执行 scheduleUpdateOnFiber 这个函数会调用markUpdateFromFiberToRoot 查询到fiberNode的根节点,这个根节点就是FiberRootNode,它的stateNode就是hostRootFiber ,返回FiberRootNode 并调用,再拿FiberRootNode 的current给createWorkInProgress去创建第一个WorkInProgress 循环 执行递归(beginWork和completework)

Untitled