React Hooks 闭包陷阱

0.背景

什么是闭包?

为什么要存在闭包?

1.不同React Hooks中的闭包陷阱的表现

1.1 useState中的陷阱表现

具体问题表现场景是:在异步回调中获取不到最新的state状态值

例1:

js 复制代码
import React, { useState, useEffect } from 'react';

const App = () => {
  const [arr, setArr] = useState([0]);

  useEffect(() => {
    console.log(arr);
  }, [arr]);

  const handleClick = () => {
    Promise.resolve().then(() => {
      setArr([...arr, 1]); // 此时赋值前 arr 为:[0],异步回调中更新了state状态
    })
      .then(() => {
        setArr([...arr, 2]); // 此时赋值前 arr 为旧状态仍然为:[0],在第二个异步回调中拿到的state值不是前面更新过的
      });
  }
  
  // 我们希望打印的是[0], [0,1], [0,1,2]
  // 实际上打印的而是[0], [0,1], [0,1]
  return (
    <>
      <button onClick={handleClick}>change</button>
    </>
  );
}

export default App;

经典例2:

js 复制代码
function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  };
  const handleReset = () => {
    setCount(0);
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

我们每次点击之后,开启一个异步的定时器回调,然后在定时器中执行更新setState函数。假设定时器的执行间隔是1s。那么我在1s内连续点击5次,对应的函数回调会设置5个定时器回调函数,每隔1s就会执行setState操作来更新state状态。每次回调应该拿到最新的state状态值。

(1) 对应原因

(2) 解决方案

参考:www.cnblogs.com/hymenhan/p/...

1.2 useEffect中的陷阱表现

js 复制代码
function App() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count);
    }, 1000);
    return () => clearInterval(timer);
  }, []);
  
  const handleClick = () => {
    setCount(count + 1);
  };
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

在这个例子中,我们在点击事件回调中使用setState来更新state状态,然后 我们使用了 useState 和 useEffect Hooks。在 useEffect 回调函数内部,我们使用了一个 setInterval 函数来输出 count 状态变量。然而,由于 useEffect 只会在组件首次渲染时执行一次,因此闭包中的 count 变量始终是首次渲染时的变量,而不是最新的值。

(1) 对应原因

(2) 解决方案

useEffect中闭包表现对应参考文献: segmentfault.com/a/119000004...

2.总结

对于这个问题能给我带来什么?我们需要注意在异步中更新state状态后,后续的是否可以拿到最新的state状态值。

问题1:组件每次更新UI的时候,拿到的state是从哪里获取的,是在hook-useState中的memoizedState中拿的吗?

问题2:hook如何获取数据

问题3:hook如何更新数据?

当我们使用useState的时候,返回的第二个setState函数可以认为是dispatch函数,我们使用这个函数来更新state状态,就可以实现视图UI的更新。 那么我们使用setState的时候发生了什么呢?首先,先考虑state的数据的更新,在考虑视图的更新。 数据方面,调用一次setState会对应创建一个update对象

hooks节点中的memoizedState和baseState,在存储的数据一定是相同的吗?如果不同,为什么要这么设置?

答:basestate是当前组件在更新过程中,基于已更新的state的临时存储值。而memoizedstate是当前组件所有的setState更新完毕之后最终存储的state最终值。UI视图上渲染的就是拿的这个memoizedState值。之所以要额外设置baseState是因为考虑在更新过程中,存在优先级临时插队的"中断"情况,因此需要中断的时候及时存储对应当前计算出来的"临时值"。

相关推荐
清风絮柳8 分钟前
59.基于ssm和vue学生考试成绩管理系统
前端·javascript·vue.js·毕业设计·ssm架构·学生考试成绩管理系统·学生考试成绩管理
风雨兼程^_^38 分钟前
Nuxt3项目的SEO优化(robots.txt,页面tdk,伪静态.html,sitemap.xml动态生成等)
前端·seo·nuxt3·服务端渲染ssr
佬乔40 分钟前
xml中配置AOP织入
java·服务器·前端
Eugene__Chen42 分钟前
JavaWeb开发基础知识-XML和JSON
java·开发语言·前端
谢尔登1 小时前
为 IDEA 设置管理员权限
前端·express
Kx…………1 小时前
Uni-app入门到精通:uni-app的基础组件
前端·css·学习·uni-app·html
巴巴博一1 小时前
keep-alive缓存
前端·javascript·vue.js·缓存·typescript
Tipriest_1 小时前
【前端扫盲】postman介绍及使用
前端·测试工具·postman
wuaro2 小时前
JS的深浅拷贝
前端·javascript·html
Hamm2 小时前
用一种全新的方式来实现i18n,和魔法字符串彻底说拜拜
前端·vue.js·typescript