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

发布时间 2023-07-16 17:23:52作者: SimoonJia

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值