彻底搞懂setState到底是同步还是异步(三)

前言

书接上回,React 17 和 React 18 中的setState 都已摸清到底是怎么回事,但是里面的代码全部是基于class 组件的形式

但是现在 React 推荐的都是 hooks 写法,那 hooks 和 class 组件在处理 setState 上有什么区别吗?

话不多说,咱们直接上代码看下结果:

大家好,我是【前端探险家克鲁】。微信公众号、知乎、掘金、CSDN同名,欢迎查看我的个人简介,一起学习提升。

将面试题改造成hooks形式

jsx 复制代码
import { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  const handle = () => {
    setCount(1);
    console.log('count: ', count);

    setCount(2);
    console.log('count: ', count);

    setTimeout(() => {
      setCount(3);
      console.log('count: ', count);

      setCount(4);
      console.log('count: ', count);
    }, 0);

  };

  return (
    <>
      <div className='App'>
        <button onClick={handle}>count is {count}</button>
      </div>
    </>
  );
}

export default App;

看下在 react 17和 React 18下的运行结果:

怎么回事,都是 0,而且两个版本下表现一致,看起来像是都在批处理中

真的是这么回事吗?为了能更清楚的看到 React 的渲染行为,修改下上边的代码,在每次渲染都都打印下当前的 count值,添加如下代码:

jsx 复制代码
  useEffect(() => {
    console.log('render: 此时的count: ', count);
  });

再次查看输出结果:

分析下:

  • 在 React 17 下,render 打印了 3 次,说明组件重新渲染了 3 次,回顾下当时讲解 React 17 的 setState时,批处理重新渲染一次,setTimeout中是同步渲染,重新渲染两次,能对上
  • 在来看下 React 18 下,render 打印了 2 次,说明组件重新渲染了 2 次,在对比下前面讲解的 React18 的自动批处理功能,setTimeput外部批处理一次,内部批处理一次,重新渲染两次,也能对上
  • 那为什么这期间打印的 count 都是 0 呢?

解惑

闭包

首先需要先知道一个 js 的特性:闭包,下面是 mdn 中关于闭包的解释

闭包(closure)是一个函数以及其捆绑的周边环境状态(lexical environment,词法环境)的引用的组合。换而言之,闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中,闭包会随着函数的创建而被同时创建。

简单说就是:内部函数可以访问外部函数的变量

组件 App是一个函数,handleApp内的函数,这也就形成了一个闭包,所以 handle 函数才能访问到 count 变量的值。

结论

因为在reactstate的更新都遵从一个原则:**state**指向的内容是不可变的。
state 改变时不是改变当前内容而是指向了新的内容对象

所以在上面setCount 改变count 时,count 指向了新的内容对象

又因为在函数组件中,handle 函数与组件App 形成了闭包关系

这就导致handle 函数一直持有count 的引用而无法发生变化,所以无论延时多长时间,最终打印的count值一直是旧值,也就是 0

相关推荐
m0_748255029 分钟前
前端常用算法集合
前端·算法
真的很上进23 分钟前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web1309332039829 分钟前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2341 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1231 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~2 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语2 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport2 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg2 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww2 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest