首页 > 其他分享 >useEffect、异步请求、定时器使用useState闭包问题

useEffect、异步请求、定时器使用useState闭包问题

时间:2023-07-16 17:35:41浏览次数:30  
标签:闭包 count setCount 十秒 useState useEffect

useEffect闭包问题:

问题:useEffect使用useState会使调用的所有方法内部的state值为useEffect周期的值,即使在这个过程中useState的值变化也不能影响调用方法内获取到原始值

解决方式:使用useCallabck 可以避免由此产生的闭包问题

异步请求、定时器等js闭包问题:

问题: 异步请求和定时器 的回调函数里调用的方法也会产生js闭包问题 

原因:useState源码执行时每次都会重新定义一个useState来存储最新的值,但是头部会存在一个同名的state值,因此如果直接调用 会拿全局的这个变量(并非最新值),因此产生闭包,如果使用setData(c=>{ 内部}) 方法就可以在内部拿到useState每次定义的新值,因此可使用此方法避免js闭包

解决方式:setData(c=>最新值) 

示例:闭包

const [count,setCount]=0
setCount(10)
setTimeout(()=>{
    let bibaoCount=count+1
    setCount(bibaoCount)
},10000)
// 1

十秒后:count的值会被置为1,无论在十秒内有任何set方法都不影响

示例:非闭包

const [count,setCount]=0
setCount(10)
setTimeout(()=>{
    setCount(c=>c+1)
},10000)
// 11

十秒后:count的值会被置为11,在这十秒内的任何变化都会影响最终的count值

标签:闭包,count,setCount,十秒,useState,useEffect
From: https://www.cnblogs.com/Simoon/p/17558179.html

相关文章

  • 如何解决 React.useEffect() 的无限循环
    [如何解决React.useEffect()的无限循环-react.useeffect](https://www.51cto.com/article/654928.html)使用useEffect()时,你可能会遇到一个陷阱,那就是组件渲染的无限循环。在这篇文章中,会讲一下产生无限循环的常见场景以及如何避免它们。 useEffect()主要用来管理副作用,比......
  • 作用域,闭包,原型链,类,继承
    JavaScript作用域和闭包-程序猿的程-博客园(cnblogs.com)详谈JavaScript原型链-程序猿的程-博客园(cnblogs.com)详谈Javascript类与继承-程序猿的程-博客园(cnblogs.com)......
  • rust 自动化测试、迭代器与闭包、智能指针、无畏并发
    编写测试可以让我们的代码在后续迭代过程中不出现功能性缺陷问题;理解迭代器、闭包的函数式编程特性;Box<T>智能指针在堆上存储数据,Rc<T>智能指针开启多所有权模式等;理解并发,如何安全的使用线程,共享数据。自动化测试编写测试以方便我们在后续的迭代过程中,不会改坏代码。保证了程序......
  • 函数定义、调用、闭包
    函数的语法及调用步骤函数是直接在模块/py文件中定义的,与类方法、实例方法有区别。1'''2一、函数的语法:3deffunction_name(parameter1,parameter2,...):4"""函数文档字符串"""5#函数体代码块6#...7returnvalue#可选的返回值8......
  • python闭包_装饰器
    6.python高级知识-闭包装饰器/demo02_闭包.py#-*-coding:utf-8-*-#第一种方法================================#每次都更具汇率和钱都写一遍#这种方法是太烦了print("第一种方法")rate_usa=0.7money=100#print(rate_usa*money)print("第一种方法结束")#......
  • 你不知道的JavaScript闭包知识
    原文合集地址如下,有需要的朋友可以关注本文地址合集地址什么是闭包当一个函数能够记住并访问它创建时的词法作用域,即使该函数在其词法作用域之外执行,我们称之为闭包。闭包就像是一个背包,函数和它所需要的变量就像是放在背包里的物品。无论函数在哪里执行,它都能够打开背包并使......
  • 闭包
    闭包闭包是一个函数及其捆绑的周边环境状态引用的组合。即闭包可以让开发者从内部函数访问外部函数的作用域。在JavaScript中闭包会随着函数的创建而被同时创建。一、词法作用域functioninit(){constname='wyl';functiondisplayName(){......
  • go汇编语言-闭包是如何实现的?
    分析的代码packagemainfunctest(aint)func(iint)int{returnfunc(iint)int{a=a+ireturna}}funcmain(){f:=test(1)a:=f(2)println(a)b:=f(3)println(b)}代码比较简易,test函数产生一个闭包......
  • [记]Rust闭包加动态分发
    pubtraitApp{fnrun(&mutself);}#[derive(Clone,Copy)]pubstructCda{d:i32,}implCda{fnnew(num:i32)->Self{Self{d:num}}fninc(&mutself)->Self{self.d+=1;*self}fnshow(......
  • 柯里化和闭包 7.1
     ......