react 源码解析 12.状态更新流程
视频课程（高效学习）：进入课程
课程目录：
1.开篇介绍和面试题
2.react的设计理念
3.react源码架构
4.源码目录结构和调试
5.jsx&核心api
6.legacy和concurrent模式入口函数
7.Fiber架构
8.render阶段
9.diff算法
10.commit阶段
11.生命周期
12.状态更新流程
13.hooks源码
14.手写hooks
15.scheduler&Lane
16.concurrent模式
17.context
18事件系统
19.手写迷你版react
20.总结&第一章的面试题解答
21.demo
setState&forceUpdate
在 react 中触发状态更新的几种方式：
ReactDOM.render
this.setState
this.forceUpdate
useState
useReducer
我们重点看下重点看下 this.setState 和 this.forceUpdate，hook 在第 13 章讲
this.setState 内调用 this.updater.enqueueSetState，主要是将 update 加入 updateQueue 中
//ReactBaseClasses.js Component.prototype.setState = function (partialState, callback) { if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) { { throw Error( "setState(...): takes an object of state variables to update or a function which returns an object of state variables." ); } } this.updater.enqueueSetState(this, partialState, callback, 'setState'); };
复制代码
//ReactFiberClassComponent.old.js enqueueSetState(inst, payload, callback) { const fiber = getInstance(inst);//fiber实例 const eventTime = requestEventTime(); const suspenseConfig = requestCurrentSuspenseConfig(); const lane = requestUpdateLane(fiber, suspenseConfig);//优先级 const update = createUpdate(eventTime, lane, suspenseConfig);//创建update update.payload = payload; if (callback !== undefined && callback !== null) { //赋值回调 update.callback = callback; } enqueueUpdate(fiber, update);//update加入updateQueue scheduleUpdateOnFiber(fiber, lane, eventTime);//调度update }
复制代码
enqueueUpdate 用来将 update 加入 updateQueue 队列
//ReactUpdateQueue.old.js export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) { const updateQueue = fiber.updateQueue; if (updateQueue === null) { return; } const sharedQueue: SharedQueue<State> = (updateQueue: any).shared; const pending = sharedQueue.pending; if (pending === null) { update.next = update;//与自己形成环状链表 } else { update.next = pending.next;//加入链表的结尾 pending.next = update; } sharedQueue.pending = update; }
复制代码
this.forceUpdate 和 this.setState 一样，只是会让 tag 赋值 ForceUpdate
//ReactBaseClasses.js Component.prototype.forceUpdate = function(callback) { this.updater.enqueueForceUpdate(this, callback, 'forceUpdate'); };
复制代码
//ReactFiberClassComponent.old.js enqueueForceUpdate(inst, callback) { const fiber = getInstance(inst); const eventTime = requestEventTime(); const suspenseConfig = requestCurrentSuspenseConfig(); const lane = requestUpdateLane(fiber, suspenseConfig); const update = createUpdate(eventTime, lane, suspenseConfig); //tag赋值ForceUpdate update.tag = ForceUpdate; if (callback !== undefined && callback !== null) { update.callback = callback; } enqueueUpdate(fiber, update); scheduleUpdateOnFiber(fiber, lane, eventTime); }, };
复制代码
如果标记 ForceUpdate，render 阶段组件更新会根据 checkHasForceUpdateAfterProcessing，和 checkShouldComponentUpdate 来判断，如果 Update 的 tag 是 ForceUpdate，则 checkHasForceUpdateAfterProcessing 为 true，当组件是 PureComponent 时，checkShouldComponentUpdate 会浅比较 state 和 props，所以当使用 this.forceUpdate 一定会更新
//ReactFiberClassComponent.old.js const shouldUpdate = checkHasForceUpdateAfterProcessing() || checkShouldComponentUpdate( workInProgress, ctor, oldProps, newProps, oldState, newState, nextContext, );
复制代码
状态更新整体流程
Update&updateQueue
HostRoot 或者 ClassComponent 触发更新后，会在函数 createUpdate 中创建 update，并在后面的 render 阶段的 beginWork 中计算 Update。FunctionComponent 对应的 Update 在第 11 章讲，它和 HostRoot 或者 ClassComponent 的 Update 结构有些不一样
//ReactUpdateQueue.old.jsexport function createUpdate(eventTime: number, lane: Lane): Update<*> {//创建update const update: Update<*> = { eventTime, lane,
tag: UpdateState, payload: null, callback: null,
next: null, }; return update;}
复制代码
我们主要关注这些参数：
lane：优先级（第 12 章讲）
tag：更新的类型，例如 UpdateState、ReplaceState
payload：ClassComponent 的 payload 是 setState 第一个参数，HostRoot 的 payload 是 ReactDOM.render 的第一个参数
callback：setState 的第二个参数
next：连接下一个 Update 形成一个链表，例如同时触发多个 setState 时会形成多个 Update，然后用 next 连接
对于 HostRoot 或者 ClassComponent 会在 mount 的时候使用 initializeUpdateQueue 创建 updateQueue，然后将 updateQueue 挂载到 fiber 节点上
//ReactUpdateQueue.old.jsexport function initializeUpdateQueue<State>(fiber: Fiber): void { const queue: UpdateQueue<State> = { baseState: fiber.memoizedState, firstBaseUpdate: null, lastBaseUpdate: null, shared: { pending: null, }, effects: null, };fiber.updateQueue = queue;}
复制代码
baseState：初始 state，后面会基于这个 state，根据 Update 计算新的 state
firstBaseUpdate、lastBaseUpdate：Update 形成的链表的头和尾
shared.pending：新产生的 update 会以单向环状链表保存在 shared.pending 上，计算 state 的时候会剪开这个环状链表，并且链接在 lastBaseUpdate 后
effects：calback 不为 null 的 update
从触发更新的 fiber 节点向上遍历到 rootFiber
在 markUpdateLaneFromFiberToRoot 函数中会从触发更新的节点开始向上遍历到 rootFiber，遍历的过程会处理节点的优先级（第 15 章讲）
//ReactFiberWorkLoop.old.jsfunction markUpdateLaneFromFiberToRoot( sourceFiber: Fiber, lane: Lane, ): FiberRoot | null { sourceFiber.lanes = mergeLanes(sourceFiber.lanes, lane); let alternate = sourceFiber.alternate; if (alternate !== null) { alternate.lanes = mergeLanes(alternate.lanes, lane); } let node = sourceFiber; let parent = sourceFiber.return; while (parent !== null) {//从触发更新的节点开始向上遍历到rootFiber parent.childLanes = mergeLanes(parent.childLanes, lane);//合并childLanes优先级 alternate = parent.alternate; if (alternate !== null) { alternate.childLanes = mergeLanes(alternate.childLanes, lane); } else { } node = parent; parent = parent.return; } if (node.tag === HostRoot) { const root: FiberRoot = node.stateNode; return root; } else { return null; } }
复制代码
例如 B 节点触发更新，B 节点被被标记为 normal 的 update，也就是图中的 u1，然后向上遍历到根节点，在根节点上打上一个 normal 的 update，如果此时 B 节点又触发了一个 userBlocking 的 Update，同样会向上遍历到根节点，在根节点上打上一个 userBlocking 的 update。
如果当前根节点更新的优先级是 normal，u1、u2 都参与状态的计算，如果当前根节点更新的优先级是 userBlocking，则只有 u2 参与计算
调度
在 ensureRootIsScheduled 中，scheduleCallback 会以一个优先级调度 render 阶段的开始函数 performSyncWorkOnRoot 或者 performConcurrentWorkOnRoot
//ReactFiberWorkLoop.old.jsif (newCallbackPriority === SyncLanePriority) { // 任务已经过期，需要同步执行render阶段 newCallbackNode = scheduleSyncCallback( performSyncWorkOnRoot.bind(null, root) );} else { // 根据任务优先级异步执行render阶段 var schedulerPriorityLevel = lanePriorityToSchedulerPriority( newCallbackPriority ); newCallbackNode = scheduleCallback( schedulerPriorityLevel, performConcurrentWorkOnRoot.bind(null, root) );}
复制代码
状态更新
classComponent 状态计算发生在 processUpdateQueue 函数中，涉及很多链表操作，看图更加直白
初始时 fiber.updateQueue 单链表上有 firstBaseUpdate（update1）和 lastBaseUpdate（update2），以 next 连接
fiber.updateQueue.shared 环状链表上有 update3 和 update4，以 next 连接互相连接
计算 state 时，先将 fiber.updateQueue.shared 环状链表‘剪开’，形成单链表，连接在 fiber.updateQueue 后面形成 baseUpdate
然后遍历按这条链表，根据 baseState 计算出 memoizedState
带优先级的状态更新
类似 git 提交，这里的 c3 意味着高优先级的任务，比如用户出发的事件，数据请求，同步执行的代码等。
通过 ReactDOM.render 创建的应用没有优先级的概念，类比 git 提交，相当于先 commit，然后提交 c3
在 concurrent 模式下，类似 git rebase，先暂存之前的代码，在 master 上开发，然后 rebase 到之前的分支上
优先级是由 Scheduler 来调度的，这里我们只关心状态计算时的优先级排序，也就是在函数 processUpdateQueue 中发生的计算，例如初始时有 c1-c4 四个 update，其中 c1 和 c3 为高优先级
在第一次 render 的时候，低优先级的 update 会跳过，所以只有 c1 和 c3 加入状态的计算
在第二次 render 的时候，会以第一次中跳过的 update（c2）之前的 update（c1）作为 baseState，跳过的 update 和之后的 update（c2，c3，c4）作为 baseUpdate 重新计算
在在 concurrent 模式下，componentWillMount 可能会执行多次，变现和之前的版本不一致
注意，fiber.updateQueue.shared 会同时存在于 workInprogress Fiber 和 current Fiber，目的是为了防止高优先级打断正在进行的计算而导致状态丢失，这段代码也是发生在 processUpdateQueue 中
看 demo_8 的优先级
现在来看下计算状态的函数
//ReactUpdateQueue.old.jsexport function processUpdateQueue<State>( workInProgress: Fiber, props: any, instance: any, renderLanes: Lanes,): void { const queue: UpdateQueue<State> = (workInProgress.updateQueue: any); hasForceUpdate = false;
let firstBaseUpdate = queue.firstBaseUpdate;//updateQueue的第一个Update let lastBaseUpdate = queue.lastBaseUpdate;//updateQueue的最后一个Update let pendingQueue = queue.shared.pending;//未计算的pendingQueue
if (pendingQueue !== null) { queue.shared.pending = null; const lastPendingUpdate = pendingQueue;//未计算的ppendingQueue的最后一个update const firstPendingUpdate = lastPendingUpdate.next;//未计算的pendingQueue的第一个update lastPendingUpdate.next = null;//剪开环状链表 if (lastBaseUpdate === null) {//将pendingQueue加入到updateQueue firstBaseUpdate = firstPendingUpdate; } else { lastBaseUpdate.next = firstPendingUpdate; } lastBaseUpdate = lastPendingUpdate;
const current = workInProgress.alternate;//current上做同样的操作 if (current !== null) { const currentQueue: UpdateQueue<State> = (current.updateQueue: any); const currentLastBaseUpdate = currentQueue.lastBaseUpdate; if (currentLastBaseUpdate !== lastBaseUpdate) { if (currentLastBaseUpdate === null) { currentQueue.firstBaseUpdate = firstPendingUpdate; } else { currentLastBaseUpdate.next = firstPendingUpdate; } currentQueue.lastBaseUpdate = lastPendingUpdate; } } }
if (firstBaseUpdate !== null) { let newState = queue.baseState;
let newLanes = NoLanes;
let newBaseState = null; let newFirstBaseUpdate = null; let newLastBaseUpdate = null;
let update = firstBaseUpdate; do { const updateLane = update.lane; const updateEventTime = update.eventTime; if (!isSubsetOfLanes(renderLanes, updateLane)) {//判断优先级是够足够 const clone: Update<State> = {//优先级不够 跳过当前update eventTime: updateEventTime, lane: updateLane,
tag: update.tag, payload: update.payload, callback: update.callback,
next: null, }; if (newLastBaseUpdate === null) {//保存跳过的update newFirstBaseUpdate = newLastBaseUpdate = clone; newBaseState = newState; } else { newLastBaseUpdate = newLastBaseUpdate.next = clone; } newLanes = mergeLanes(newLanes, updateLane); } else { //直到newLastBaseUpdate为null才不会计算，防止updateQueue没计算完 if (newLastBaseUpdate !== null) { const clone: Update<State> = { eventTime: updateEventTime, lane: NoLane,
tag: update.tag, payload: update.payload, callback: update.callback,
next: null, }; newLastBaseUpdate = newLastBaseUpdate.next = clone; }
newState = getStateFromUpdate(//根据updateQueue计算state workInProgress, queue, update, newState, props, instance, ); const callback = update.callback; if (callback !== null) { workInProgress.flags |= Callback;//Callback flag const effects = queue.effects; if (effects === null) { queue.effects = [update]; } else { effects.push(update); } } } update = update.next;//下一个update if (update === null) {//重置updateQueue pendingQueue = queue.shared.pending; if (pendingQueue === null) { break; } else { const lastPendingUpdate = pendingQueue;
const firstPendingUpdate = ((lastPendingUpdate.next: any): Update<State>); lastPendingUpdate.next = null; update = firstPendingUpdate; queue.lastBaseUpdate = lastPendingUpdate; queue.shared.pending = null; } } } while (true);
if (newLastBaseUpdate === null) { newBaseState = newState; }
queue.baseState = ((newBaseState: any): State);//新的state queue.firstBaseUpdate = newFirstBaseUpdate;//新的第一个update queue.lastBaseUpdate = newLastBaseUpdate;//新的最后一个update
markSkippedUpdateLanes(newLanes); workInProgress.lanes = newLanes; workInProgress.memoizedState = newState; }
//...}
复制代码
评论