【React Hooks - useState状态批量更新原理】

概述

所谓批量处理就是当在同时更新多个状态下，能够统一批量处理更新，避免了重复渲染。在React17及之前版本，React只会在合成事件以及生命周期内部进行批量处理，在setTimeout、Promise、Fetch等异步请求中，则不会自动批量处理，需要使用unstable_batchedUpdatesAPI手动处理。而在React18对其进行了优化，不管什么条件下，默认都会批量处理。本文主要就是从demo实例结合bugger源码的方式来解释在React17和18中对于状态批量更新的逻辑介绍。

React17

从概述可知，React17版本，默认只会在合成事件、生命周期内批量处理，在异步请求中需要手动处理，先看下面demo代码：

import React, {
    Fragment, useState } from 'react';

export default function Component() {
   
  const [a, setA] = useState(1);
  console.log('a', a);

  // 异步请求，不会自动批量，会渲染多次，该示例中会render4次
  function handleClickWithPromise() {
   
    Promise.resolve().then(() => {
   
      setA((a) => a + 1);
      setA((a) => a + 1);
      setA((a) => a + 1);
      setA((a) <