Tips
React如何批量更新 state?
React什么时候清理一次 queue?
Inspiration
queue, 点餐, callback
Center Paragraph
设置组件的state 会将一次重新渲染加入队列.React会等到事件处理函数中的setState全部执行完再更新State.
state 批处理
连连看餐厅的服务员.每次不会你点一道菜她就往餐厅跑一次,他们会让你把菜点完甚至他们会帮其他桌上菜.
这可以让你更新多个state变量(甚至来自其他组件),比如react建议父组件的callback放在子组件的事件处理函数中,
而不会触发太多的重新渲染
setState 更新函数
react 会将函数放在队列之中
setState(x) === setState(n => x) 实际上我们没有使用 n
export function getFinalState(baseState, queue) {
let finalState = baseState;
for (let update of queue) {
if (typeof update === 'function') {
finalState = update(finalState);
} else {
finalState = update;
}
}
return finalState;
}
Keep in mind
- 每一次渲染 state 的值都是固定的.
-
flashSync内所有的React更新操作将会同步更新到浏览器DOM中
function delay(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
不求甚解
思考FlashSync的使用场景.
