react hooks 批量更新优化

无状态组件中

const [a, setA] = useState(1)
const [b, setB] = useState({})
const [c, setC] = useState(1)
const handerClick = () => {
  setB({ ...b })
  setC(c + 1)
  setA(a + 1)
}

批量更新失效
这种情况在react-hooks中也普遍存在，这种情况甚至在hooks中更加明显，因为我们都知道hooks中每个useState保存了一个状态，并不是让class声明组件中，可以通过this.state统一协调状态，再一次异步函数中，比如说一次ajax请求后，想通过多个useState改变状态，会造成多次渲染页面，为了解决这个问题，我们可以手动批量更新。

手动批量更新
react-dom 中提供了unstable_batchedUpdates方法进行手动批量更新。这个api更契合react-hooks，我们可以这样做。

const handerClick = () => {
  Promise.resolve().then(() => {
    unstable_batchedUpdates(() => {
      setB({ ...b })
      setC(c + 1)
      setA(a + 1)
    })
  })
}

摘自 https://juejin.cn/post/6908895801116721160#heading-32