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的使用场景.