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

最新推荐文章于 2024-09-03 21:00:35 发布

宇豪学习录

最新推荐文章于 2024-09-03 21:00:35 发布

阅读量1.3k

点赞数 22

分类专栏： React Hooks原理文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44273311/article/details/141321381

版权

概述

所谓批量处理就是当在同时更新多个状态下，能够统一批量处理更新，避免了重复渲染。在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) <