反应挂钩：设置不同状态时减少重新渲染

Question

如果必须在setTimeout或async函数中更新两个不同的状态，如何减少渲染调用。看来这两个设置呼叫将不会被批处理。

我不想将两个状态合并为一个状态。

// render once!
function Component () {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  const update = () => { setA(1); setB(1); }
  useEffect(() => { update() }, []);
  return (<div>{a}{b}</div>);
}

// render twice!
function Component () {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  const update = () => { setA(1); setB(1); }
  useEffect(() => {
    setTimeout(() => { update(); })
  }, []);
  return (<div>{a}{b}</div>);
}