电商网络推广免费网站seo优化
摘要
在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循环
我们想一下，之前触发更新后，执行的机制是什么样子的。
- 更新updateQueue
- 拿到更新的updateQueue，挂载Hook上
- 执行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一次。