优先级相关

内容在SchedulePriorities.js

  • NoPrioritiy: 初始化时无优先级
  • ImmediatePrioritiy: 立刻执行的优先级 (也就是同步执行的优先级)
  • UserBlockingPrioritiy: 用户触发的更新优先级，如点击事件等等的优先级
  • NormalPrioritiy:一般的更新级，请求数据返回时更新状态
  • LowPrioritiy:Suspence使用的
  • IdlePrioritiy: 空闲时的优先级

状态更新

每次状态更新都会创建一个保存更新状态相关内容的Update对象。在render阶段的beginWork方法中会根据Update计算新的state。

  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结构

Update由createUpdate方法返回，可以从这里看到createUpdate的源码

Fiber节点上的多个Update会组成链表并被包含在fiber.updateQueue中。

什么情况下一个Fiber节点会存在多个Update？如下就是一种：

1
2
3
4
5
6
7
8
9
onClick() {
  this.setState({
    a: 1
  })

  this.setState({
    b: 2
  })
}

在一个ClassComponent中触发onClick方法，方法内部调用了两次this.setState。这会在该Fiber节点中产生两个Update。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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之后, 会依次调用这里的回调函数.
|};

UpdateQueue由initializeUpdateQueue方法返回，initializeUpdateQueue的源码

  • 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。

这里的updateQueue有三种类型，

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

FunctionComponent单独使用一种Update结构

Hook对象的数据结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//除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,
|};

hook与FunctionComponent fiber都存在memoizedState属性，

  • FunctionComponent中的UpdateQueue

updateQueue工作流

假设有一个Fiber节点刚刚完成commit阶段的渲染，这个Fiber节点上存在两个由于优先级过低并没有被更新的Update（update1，update2），就会成为下次更新的baseUpdate，也就是render阶段跳过了这两个update处理。

1
2
3
fiber.updateQueue.firstBaseUpdate = update1;
fiber.updateQueue.lastBaseUpdate = update2;
update1.next = update2;

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

然后在Fiber上触发两次状态更新，这会先后产生两个新的Update（update3，update4）

enqueueUpdate

就是为Fiber节点增加新的Update的方法

首先获取到shared.pending，如果存在update，就把新的update.next指向pending.next，pending.next指向新的update，形成环状链表

1
2
3
4
5
6
7
8
9
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;

每个 Update 都会通过 enqueueUpdate 方法插入到 Fiber的updateQueue.shared.pending上

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

也就是shared.pending是保存了update3的环形链表

插入update4后:

1
2
3
fiber.updateQueue.shared.pending === update4;
update4.next = update3;
update3.next = update4

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

假如还有update5:

1
2
3
fiber.updateQueue.shared.pending === update5;
update5.next = update3
update4.next = update5;

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

shared.pending 会保证始终指向最后一个插入的update

更新调度完成后进入render阶段，这个时候shared.pending的环被剪开并连接在updateQueue.lastBaseUpdate后面：

processUpdateQueue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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;
  }
}

render阶段的这个方法就是根据queue.shared.pending！==null来判断
是否有新的更新，如果有的话，会把他们转入baseQueue：

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

合并入updateQueue

接下来遍历updateQueue.baseUpdate链表，以fiber.updateQueue.baseState为初始state，依次与遍历到的每个Update计算并产生新的state。

在遍历时如果有优先级低的Update会被跳过。

当遍历完成后获得的state会保存在Fiber节点的memoizedState属性上，就是该Fiber节点在本次更新的state

比如说updateCount设置的值依赖于上一次count的值，React怎么能够获取上次的值呢？

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

Update值不丢失

  • current Fiber保存的updateQueue即current updateQueue
  • workInProgress Fiber保存的updateQueue即workInProgress updateQueue

在commit阶段完成页面渲染后，workInProgress Fiber树变为current Fiber树，workInProgress Fiber树内Fiber节点的updateQueue就变成current 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丢失。

当某个Update由于优先级低而被跳过时，保存在baseUpdate中的不仅是该Update，还包括链表中该Update之后的所有Update。

ReactDOM.render

ReactDOM.render调用栈

创建Fiber

ReactDOM.render方法会调用legacyRenderSubtreeIntoContainer方法创建FiberRootNode，

legacyRenderSubtreeIntoContainer:

1
2
3
4
5
6
7
8
9
10
11
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
    .....

其中legacyCreateRootFromDOMContainer方法最终调用的createRootImpl方法，其中createContainer方法调用了createFiberRoot方法，这里面真正创建了fiberRootNode，rootFiber以及进行两者的关联，最后初始化了updateQueue:

createRootImpl

createFiberRoot

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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

做好了组件的初始化工作后，接下来就等待创建Update来开启一次更新。updateContainer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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方法。

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

enqueueSetState

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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

这个方法是this.forceUpdate会调用的，除了赋值update.tag = ForceUpdate以及没有payload外，其他逻辑与this.setState一致。这个在判断ClassComponent是否需要更新时有两个条件需要满足：

  • checkHasForceUpdateAfterProcessing：内部会判断本次更新的Update是否为ForceUpdate。即如果本次更新的Update中存在tag为ForceUpdate，则返回true。
  • checkShouldComponentUpdate：内部会调用shouldComponentUpdate方法。以及当该ClassComponent为PureComponent时会浅比较state与props。

useState更新流程

1
2
3
4
5
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阶段

整个流程也就是可以简化成如下公式：

baseState + update1 + update2 =newState

基于baseState和Update链表（再加优先级）计算出新的State