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值