React流程概览

优先级相关

• NoPrioritiy: 初始化时无优先级

• ImmediatePrioritiy: 立刻执行的优先级 (也就是同步执行的优先级)

• UserBlockingPrioritiy: 用户触发的更新优先级，如点击事件等等的优先级

• NormalPrioritiy:一般的更新级，请求数据返回时更新状态

• LowPrioritiy:Suspence使用的

• IdlePrioritiy: 空闲时的优先级

状态更新

1. 触发状态更新（根据场景调用不同方法）

2. 创建Update对象
1. ReactDOM.render
2. this.setState
3. this.forceUpdate
4. useState
5. useReducer

3. 从fiber到root（markUpdateLaneFromFiberToRoot）

4. 调度更新（ensureRootIsScheduled）：首先如果rootFiber对应的Fiber树中某个Fiber节点包含一个Update，然后通知Scheduler根据更新的优先级，决定以同步还是异步的方式调度本次更新

5. render阶段（performSyncWorkOnRoot 或 performConcurrentWorkOnRoot）

6. commit阶段（commitRoot方法，传入rootFiber）

Update结构

ClassComponent 和 HostRoot 共用一套Update结构

onClick() {  this.setState({    a: 1  })  this.setState({    b: 2  })}

const update: Update<*> = {  eventTime,//发起update事件的时间，performance.now()获取毫秒时间(17.0.2中作为临时字段, 即将移出)  lane,// update所属的优先级  tag: UpdateState,//更新的类型  UpdateState/ReplaceState /ForceUpdate/CaptureUpdate  payload: null, // 更新挂载的数据，不同类型组件挂载的数据不同。HostRoot为需要挂载在根节点的组件，也就是ReactDom.render的第一个参数，而ClassComponent为this.setState的第一个参数  callback: null,//更新的回调函数，commit完成之后会调用。也就是ClassComponent中this.setState的回调函数，也就是第二个参数、HostRoot中render的第三个参数  next: null,//指向下一个update对象，形成链表。如高优打断低优的任务，或者同一个事件中多次触发setState会创建多个Update对象依次连接。由于UpdateQueue是一个环形链表, 最后一个update.next指向第一个update对象.};const queue: UpdateQueue<State> = {    baseState: fiber.memoizedState,    firstBaseUpdate: null,    lastBaseUpdate: null,    shared: {      pending: null,    },    effects: null,  };  fiber.updateQueue = queue;//=========UpdateQueue==========type SharedQueue<State> = {|  pending: Update<State> | null,//指向即将输入的update队列. 在class组件中调用setState()之后, 会将新的 update 对象添加到这个队列中来.|};export type UpdateQueue<State> = {|  baseState: State,  firstBaseUpdate: Update<State> | null,  lastBaseUpdate: Update<State> | null,  shared: SharedQueue<State>,  effects: Array<Update<State>> | null,//用于保存有callback回调函数的 update 对象, 在commit之后, 会依次调用这里的回调函数.|};

• baseState：本次更新前该Fiber节点的state，Update基于该state计算更新后的state。

• firstBaseUpdate与lastBaseUpdate：本次更新前该Fiber节点已保存的Update。以链表形式存在，链表头为firstBaseUpdate，链表尾为lastBaseUpdate。之所以在更新产生前该Fiber节点内就存在Update，是由于某些Update优先级较低所以在上次render阶段由Update计算state时被跳过。

• shared.pending：触发更新时，新产生的Update会保存在shared.pending中形成单向环状链表。shared.pending 会保证始终指向最后一个插入的Update。当由Update计算state时这个环会被剪开并连接在lastBaseUpdate后面。

• effects：数组。保存update.callback !== null的Update。

• HostComponent 的UpdateQueue中是数组,i项存储key i+1项存储value (在completeWork这部分有使用过)

• ClassComponent和HostRoot中的UpdateQueue

• FunctionComponent中的UpdateQueue

FunctionComponent单独使用一种Update结构

//除memoizedState以外字段的意义ClassComponent的 updateQueue类似export type Hook = {|  memoizedState: any,  baseState: any,  baseQueue: Update<any, any> | null,  queue: UpdateQueue<any, any> | null,  next: Hook | null,|};type Update<S, A> = {|  lane: Lane,  action: A,  eagerReducer: ((S, A) => S) | null,  eagerState: S | null,  next: Update<S, A>,  priority?: ReactPriorityLevel,|};type UpdateQueue<S, A> = {|  pending: Update<S, A> | null,  dispatch: (A => mixed) | null,  lastRenderedReducer: ((S, A) => S) | null,  lastRenderedState: S | null,|};

• FunctionComponent中的UpdateQueue

updateQueue工作流

fiber.updateQueue.firstBaseUpdate = update1;fiber.updateQueue.lastBaseUpdate = update2;update1.next = update2;

链表指向：fiber.updateQueue.baseUpdate: update1->update2

enqueueUpdate

  const pending = sharedQueue.pending;  if (pending === null) {    // This is the first update. Create a circular list.    update.next = update;  } else {    update.next = pending.next;    pending.next = update;  }  sharedQueue.pending = update;

fiber.updateQueue.shared.pending === update3;update3.next === update3;

fiber.updateQueue.shared.pending === update4;update4.next = update3;update3.next = update4

环形链表指向 shared.pending:update4->update3->update4

fiber.updateQueue.shared.pending === update5;update5.next = update3update4.next = update5;

环形链表指向 shared.pending:update5->update3->update4->update5

processUpdateQueue

export function processUpdateQueue<State>(  workInProgress: Fiber,  props: any,  instance: any,  renderLanes: Lanes,): void {  // This is always non-null on a ClassComponent or HostRoot  const queue: UpdateQueue<State> = (workInProgress.updateQueue: any);  let firstBaseUpdate = queue.firstBaseUpdate;  let lastBaseUpdate = queue.lastBaseUpdate;  // Check if there are pending updates. If so, transfer them to the base queue.  let pendingQueue = queue.shared.pending;  if (pendingQueue !== null) {    queue.shared.pending = null;    // The pending queue is circular. Disconnect the pointer between first    // and last so that it's non-circular.    const lastPendingUpdate = pendingQueue;    const firstPendingUpdate = lastPendingUpdate.next;    lastPendingUpdate.next = null;    // Append pending updates to base queue    if (lastBaseUpdate === null) {      firstBaseUpdate = firstPendingUpdate;    } else {      lastBaseUpdate.next = firstPendingUpdate;    }    lastBaseUpdate = lastPendingUpdate;  }}

fiber.updateQueue.baseUpdate:update1->update2->update3->update4

const onClick = () =>{  updateCount(count => count + 1)}

Update值不丢失

• current Fiber保存的updateQueue即current updateQueue

• workInProgress Fiber保存的updateQueue即workInProgress updateQueue

• 在render阶段，fiber.updateQueue.shared.pending这个环状链表被剪开并且连接到updateQueue.lastBaseUpdate后面

• 当render阶段被中断后重新开始时，会基于current updateQueue克隆出workInProgress updateQueue。由于current updateQueue.lastBaseUpdate已经保存了上一次的Update，所以不会丢失。

• 当commit阶段完成渲染，由于workInProgress updateQueue.lastBaseUpdate中保存了上一次的Update，所以 workInProgress Fiber树变成current Fiber树后也不会造成Update丢失。

ReactDOM.render

创建Fiber

let root: RootType = (container._reactRootContainer: any);let fiberRoot;if (!root) {    // Initial mount    //container是挂载的节点，ReactDOM.render的第二个参数    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(      container,      forceHydrate,    );    fiberRoot = root._internalRoot;//创建FiberRoot    .....

export function createFiberRoot(  containerInfo: any,  tag: RootTag,  hydrate: boolean,  hydrationCallbacks: null | SuspenseHydrationCallbacks,): FiberRoot {  const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);  if (enableSuspenseCallback) {    root.hydrationCallbacks = hydrationCallbacks;  }  // Cyclic construction. This cheats the type system right now because  // stateNode is any.  const uninitializedFiber = createHostRootFiber(tag);  root.current = uninitializedFiber;  uninitializedFiber.stateNode = root;  initializeUpdateQueue(uninitializedFiber);  return root;}

创建update

export function updateContainer(  element: ReactNodeList,  container: OpaqueRoot,  parentComponent: ?React$Component<any, any>,  callback: ?Function,): Lane {  // ...  // 创建update  const update = createUpdate(eventTime, lane, suspenseConfig);  // update.payload为需要挂载在根节点的组件，也就是说对于HostRoot，payload为ReactDOM.render的第一个传参  update.payload = {element};  // callback为ReactDOM.render的第三个参数 —— 回调函数  callback = callback === undefined ? null : callback;  if (callback !== null) {    update.callback = callback;  }  // 将生成的update加入updateQueue  enqueueUpdate(current, update);  // 调度更新  scheduleUpdateOnFiber(current, lane, eventTime);  // ...}

• 创建FiberRootNode、rootFiber、初始化updateQueue(legacyCreateRootFromDOMContainer==>createRootImpl==>createFiberRoot)

• 创建Update对象(updateContainer)，放入fiber节点的updateQueue中

• 从Fiber到Root ( scheduleUpdateOnFiber方法中const root = markUpdateLaneFromFiberToRoot(fiber, lane);)

• 调度更新（scheduleUpdateOnFiber方法中ensureRootIsScheduled）

• render阶段(performSyncWorkOnRoot 或 performConcurrentWorkOnRoot)

• commit阶段(commitRoot)

setState方法会调用 this.updater.enqueueSetState方法。

this.updater.enqueueSetState(this, partialState, callback, 'setState');

enqueueSetState

enqueueSetState(inst, payload, callback) {    const fiber = getInstance(inst);//获取Class组件实例    const eventTime = requestEventTime();//开始调用的时间    const lane = requestUpdateLane(fiber);//获取需要更新的Fiber节点的优先级    const update = createUpdate(eventTime, lane);//根据优先级创建Update对象    update.payload = payload;//赋值需要更新的数据state，也就是setState的第一个参数    if (callback !== undefined && callback !== null) {      if (__DEV__) {        warnOnInvalidCallback(callback, 'setState');      }      update.callback = callback;//回调函数    }    enqueueUpdate(fiber, update);//把update入队，存入Fiber节点的updateQueue中（链表）    scheduleUpdateOnFiber(fiber, lane, eventTime);//调度update    if (__DEV__) {      if (enableDebugTracing) {        if (fiber.mode & DebugTracingMode) {          const name = getComponentName(fiber.type) || 'Unknown';          logStateUpdateScheduled(name, lane, payload);        }      }    }    if (enableSchedulingProfiler) {      markStateUpdateScheduled(fiber, lane);    }  }

enqueueForceUpdate

• checkHasForceUpdateAfterProcessing：内部会判断本次更新的Update是否为ForceUpdate。即如果本次更新的Update中存在tag为ForceUpdate，则返回true。

• checkShouldComponentUpdate：内部会调用shouldComponentUpdate方法。以及当该ClassComponent为PureComponent时会浅比较state与props。

useState更新流程

function App() {  const [num, updateNum] = useState(0);  return <p onClick={() => updateNum(num => num + 1)}>{num}</p>;}

1. 通过一些途径产生更新，更新会造成组件render。
1. 调用ReactDOM.render会产生mount的更新，更新内容为useState的initialValue（即0）。
2. 点击p标签触发updateNum会产生一次update的更新，更新内容为num => num + 1。

2. 组件render时useState返回的num为更新后的结果。

• dispatchAction ==> 创建Update并存入触发更新的Fiber节点的pending 环状链表

• 调用scheduleUpdateOnFiber
• render阶段会从当前页面的根节点向下遍历到子节点 ，而触发更新的是APP FunctionCompoent的Fiber节点，所以会从当前节点遍历到Root （从Fiber到root的方法markUpdateLaneFromFiberToRoot）

• 判断当前更新是否是同步

• 获取当前优先级最高的lane，将lanePriority 转换成schedulerPriority

• ensureRootIsScheduled (调度更新)，调用performSyncWorkOnRoot 也就是render阶段的起点函数并传入优先级，然后进入render、commit阶段