问题代码
看一段因为useEffect
导致的闭包问题代码
const btn = useRef();
const [v, setV] = useState('');
useEffect(() => {
let clickHandle = () => {
console.log('v:', v);
}
btn.current.addEventListener('click', clickHandle)
return () => {
btn.current.removeEventListener('click', clickHandle)
}
}, []);
const inputHandle = e => {
setV(e.target.value)
}
return (
<>
<input value={v} onChange={inputHandle} />
<button ref={btn} >测试</button>
</>
)
useEffect
的依赖项数组为空,所以在页面渲染完成之后,内部代码只会执行一次,页面销毁再执行一次。此时在输入框中输入任意字符,再点击测试
按钮,得到的输出为空,之后无论如何输入任何字符,再点击测试
按钮时,输出的结果仍为空。
为什么会这样呢?其实就是闭包所造成的。
产生原因
函数的作用域在函数定义的时候就决定了
给btn
注册点击事件时,作用域如下:
能访问到的自由变量v
此时还是空值。当点击事件触发时,执行点击回调函数,此时先创建执行上下文,会拷贝作用域链到执行上下文中。
- 如果未在输入框内输入字符,此时点击拿到的
v
还是原来那个v
- 如果在输入框内输入了字符,此时调用了
setV
修改了state
,页面触发render
,组件内部代码会重新执行一遍,重新声明了一个v
,v
就不再是原来那个v
,这里点击事件里作用域中的v
还是旧的v
,这是两个不同的v
产生场景
- 事件绑定。比如示例代码中,在页面最初渲染完成后只绑定一次事件的情况,比如使用
echarts
,在useEffect
中获取echarts
的实例并绑定事件 - 定时器。页面加载后注册一个定时器,定时器内的函数也会产生如此的闭包问题。
问题模拟
function Component(i, v) {
// 每次组件渲染都重新声明一个state,重新分配内存
// 之前的定时器占用内存并未释放,导致所依赖的state也未释放
// 所以注意一定要在组件销毁的时候清除定时器,事件绑定这些,避免内存泄漏
var state = v || 1;
var init = i === void 0 ? false : i;
if (init) {
console.log('new state:', state);
// 保证useEffect 只执行一次,模拟空依赖的 useEffect
return;
}
useEffect();
function useEffect() {
setInterval(function() {
console.log('state:', state)
}, 1000)
}
}
// 模拟组件渲染
Component()
setTimeout(function() {
// 一秒后 setState,触发组件渲染,更新 state 的值
Component(true, 2)
}, 1000);
- 组件渲染,
state
值为1
,在useEffect
中注册定时器,输出state
的值 - 1秒后虚空“调用”
setState
使组件触发re-render
,并更新state
值为2 - 由于空依赖的
useEffect
只执行一次,这里查看state
值后直接return
- 定时器依然输出了1,因为闭包的原因,第一次调用
Component
所分配的内存并未释放,组件re-render
后,重新分配内存,此时有两个state
都分配了内存,而定时器获取的state
从始至终都是第一个state
解决办法
针对这个闭包问题下面大致给出4种解决办法
1. 以赋值方式直接修改v
,并将修改v
的方法用useCallback
包裹起来
将修改v
的方法用useCallback
包裹起来,被useCallback
包裹的函数将被缓存,由于依赖项的数组为空,所以这里直接赋值的方式修改的v
是旧的v
,此种方法不推荐,因为setState
才是官方推荐的修改state
的方式,这里仍然使用setV
只是为了触发rerender
// v 的声明 由 const 改为 var,方便直接修改
var [v, setV] = useState('');
const inputHandle = useCallback(e => {
let { value } = e.target
v = value
setV(value)
}, [])
2. 给useEffect
的依赖项加上v
这也许是大多数人首先想到的办法,既然v
是旧的,那么每次v
更新的时候,重新注册一次事件不就行了,但是这样的会导致每次v
更新都得重新注册,理论应该只需要注册一次的事件变成了多次。
3. 避免v
被重新声明
以let
或var
的方式声明某个变量代替v
,直接修改这个变量,而不是要setState
相关函数触发render
,这样就不会被重新声明,点击的回调函数里就能拿到“最新”的值,但这个方法更不推荐,就此示例来说,input
组件由于没有rerender
而至始至终都是显示空值,不符合操作预期。
4. 使用useRef
代替useState
const btn = useRef();
const vRef = useRef('');
const [v, setV] = useStat('');
useEffect(() => {
let clickHandle = () => {
console.log('v:', vRef.current);
}
btn.current.addEventListener('click', clickHandle)
return () => {
btn.current.removeEventListener('click', clickHandle)
}
}, []);
const inputHandle = e => {
let { value } = e.target
vRef.current = value
setV(value)
}
return (
<>
<input value={v} onChange={inputHandle} />
<button ref={btn} >测试</button>
</>
)
useRef
的方案之所以有效,是因为每次input
的change
修改的是vRef
这个对象的current
属性,而vRef
始终是那个vRef
,即使rerender
,由于vRef
是对象,所以变量存储在栈内存中的值是该对象在堆内存中的地址,只是一个引用,只修改对象的某个属性,该引用并不会改变。所以点击事件中的作用域链始终访问的都是同一个vRef
代码地址
点这里看测试代码
以上如有错误,欢迎指正。