简单介绍一下情况:
起初a
的值是0,在组件挂载的时候注册了button
的点击事件。然后点击一下累加
按钮,在点击一点当前数字
按钮,发现打印还是0
,其实累加
多少次,打印的都是0
。但是页面可以正确渲染。
代码demo类似这样:
import React, { useEffect, useRef, useState } from "react";
function App() {
const [a, setA] = useState(0)
const btnRef = useRef(null)
useEffect(() => {
btnRef.current.onclick = () => {
console.log(a, 'a')
}
}, [])
return (
<div>
{a}
<button onClick={() => setA(a + 1)}>累加</button>
<button ref={btnRef}>当前数字</button>
</div>
);
}
export default App;
这个问题其实是因为闭包引起的。我在这里找到了一篇文章。
我们来简单分析一下,这是什么问题引起的。
- 调用
App()
,App组件数据初始化,此时a的值是0 - jsx开始渲染,挂载
- 挂载完毕之后执行
useEffect
,监听按钮点击事件,注意现在useEffect
的依赖项是空数组 - 点击
累加按钮
,响应式数据发生变化、重新执行App()
注意这个时候执行了两次App()
,第二次执行的时候并没有重新覆盖按钮的点击事件,因为useEffect监听是是空数组,所以当第二次执行App()
之后,点击事件引用的a还是第一次App()
执行的作用域,也就是形成了闭包。而第一次执行App()
的时候,a的值是0,所以以后点击就一直输出0。
那么如果修改呢,可以这样改
useEffect(() => {
btnRef.current.onclick = () => {
console.log(a, 'a')
}
}, [a])
也就是每次a的值改变,就重新监听点击事件