React源码解析18（11）------ 实现多次setState的批处理

摘要

在React中，如果涉及到了多次setState，组件render几次。setState是同步的还是异步的。这是一个很常见的面试题。

而本篇文章，就是主要实现React中，对于这部分的性能优化，我们称之为批处理。例如当我有下面的JSX。

const root = document.querySelector('#root');function App() {const [num, setNum] = useState(0)const click1 = () => {setNum(num + 1)setNum(num + 2)setNum(num + 3)}return jsx("div", {onClick: click1,children: num});
}ReactDOM.createRoot(root).render(<App />)

对于当前的点击事件来说，只有最后的setNum(num + 3)是有效的。

但是在我们之前的实现中，对于这种连续三次setState，我们的代码就要处理三次，就要经过三次beginWork，completeWork，commitWork。

那我们能不能实现出一种方式，对于这种多次setState，最终之做最后一次处理。

1.修改update相关逻辑

目前，在我们的代码里，能够让组件更新的方式，就是通过setState，触发更新。而updateQueue就是用来保存更新的内容。

function enqueueUpdate(updateQueue, update) {updateQueue.shared.pending = update
}

之前，在enqueueUpdate方法里，我们是直接进行赋值的。这没什么问题，因为之前每次赋值之后都会更新一下。

但是现在我们希望，最后只更新一次的话。我们就需要一个数据结构，可以保存多次更新的内容。这里使用的是链表结构，但在真正的React源码中，使用的是环形链表。

function enqueueUpdate(updateQueue, update) {// updateQueue.shared.pending = updatelet pending = updateQueue.shared.pending;if(pending === null) {updateQueue.shared.pending = update}else{while(pending.next != null) {pending = pending.next;}pending.next = updatepending = pending.next;}
}

OK，修改完之后，我们调用了三次setState，那么updateQueue中保存的应该是一个链表了。

在之前的processUpdateQueue方法里，也是直接更新就完了。但是现在updateQueue的结构发生了变化，所以对于processUpdateQueue，更新逻辑也要改变。

function processUpdateQueue(baseState, pendingUpdate) {const result = {memoizedState: baseState}if(pendingUpdate.next === undefined) {const action = pendingUpdate.action;//setState(() => {}) 传入方法if(typeof action === 'function'){result.memoizedState = action(baseState);}else {//setState()result.memoizedState = action;}return result}while(pendingUpdate != null) {const action = pendingUpdate.action;//setState(() => {}) 传入方法if(typeof action === 'function'){baseState = action(baseState);}else {//setState()baseState = action;}pendingUpdate = pendingUpdate.next;}result.memoizedState = baseState;return result;
}

我们需要遍历pending，将所有的更新内容返回。

2.修改workLoop循环

我们想一下，之前触发更新后，执行的机制是什么样子的。

1. 更新updateQueue
2. 拿到更新的updateQueue，挂载Hook上
3. 执行workLoop

也就是说，每次workLoop都只能拿到当前更新的内容。
如果我希望在第一次workLoop就可以拿到所有的更新内容，并且取消后面的workLoop。

有什么方法呢？微任务！！！！

我们可以将执行workLoop的过程放在微任务里，这样执行workLoop的时候，updateQueue的链表已经生成。

同时我们用一个标志位，取消后面的workLoop执行。
当workLoop执行完成后，再将标志位置反。

let isFinished = false;
export function syncWorkLoop(root,hostRootFilber) {if(isFinished) {return;}Promise.resolve(null).then(() => {wookLoop(root,hostRootFilber);})isFinished = true;`在这里插入代码片`
}

const wookLoop = (root,hostRootFilber) => {//其他代码。。。。。isFinished = false;
}

3.修改filberHook

最后，我们只要在filberHook中触发的逻辑里，替换workLoop即可：

function disaptchState(filber, hook, action) {const update = createUpdate(action);enqueueUpdate(hook.updateQueue, update);workUpdateHook = hook;syncWorkLoop(filber.return.stateNode);
}

通过这种方式，当我执行多次setState，最终只会render一次。