在什么情况下会产生闭包陷阱?
在React中,当使用useState和useEffect以及useCallback时,我们必须得注意闭包陷阱,避免出现一些意外的行为
什么是闭包陷阱?
闭包是指一个函数可以访问其词法作用域之外的变量。
闭包主要发生的集中情况?
在 useState 中的闭包陷阱
在 useEffect 中的闭包陷阱
在 useCallback 中的闭包陷阱
useState陷阱
出现的问题是:
当我们想做一个点击事件数值+1时,点击按钮,发现数值更新了,打印的值还是上次的,没有更新;是因为useState修改状态,是异步执行无法直接获取更新后的值
export default function Hooks() {
const [count, setCount] = useState(0);
const add = () => {
setCount( count + 1 );
console.log(count, '修改前的值');
}
return (
<div>
<span>{count}</span>
<button onClick={ add }> 数值加1 </button>
</div>
);
}
解决方法是:
通过promise.then链式调用;
可以通过useRef获取最新值
useEffect陷阱
出现的问题是:
闭包过期
import React, { useState, useEffect } from 'react'
export default function Hooks3() {
const [count, setCount] = useState(0);
useEffect(() => {
setInterval(() => {
setCount(count + 1)
}, 1000)
}, [])
useEffect(()=>{
setInterval(() => {
console.log(`Count: ${count}`)
}, 1000);
}, []);
return (
<div>
<span>{count}</span>
</div>
);
}
这个代码执行完页面上会一直显示count=1
useEffect的第二个参数为空数组时,只会执行一次,会一直执行
闭包陷阱产生的原因是useEffect的函数里引用了某个state,形成了闭包。
解决方法:
给useEffect的第二个参数添加一个依赖项;
每次更新时,添加计时器,清除定时器
useCallback陷阱
出现的问题是:
useCallback 本来拿来优化性能,当依赖变化不用重新注册该函数
使用时也会出现一定的问题
陷阱:获取父组件的值,不是最新的值,说明useCallback依赖为空数组
解决方法:
给useCallback第二个参数添加依赖的数据,依赖变化了函数会重新生成
标签:闭包,count,中闭,useCallback,React,如何,useState,陷阱,useEffect From: https://blog.csdn.net/iL_05_03/article/details/140629618