Javascript 为什么函数不能在ReactJS中的eventlistener中作为引用传递

我在ReactJS中使用功能组件

const[showState，setState]=useState（）；
useffect（（）=>{
document.addEventListener（'click'，handleClick）；
return（）=>{
document.removeEventListener（'click'，handleClick）；
}
}, []);
函数handleClick（事件）{
console.log（showState）；
};
函数toggleState（）{
设置状态（真）；
}
报税表（<
按钮onClick={
切换状态
}>切换
)

当您创建函数

handleClick

时，它通过闭包捕获

showState

的值，并且该值在第一次渲染时未定义。但当您调用

toggleState

时，React不会更改

showState

的值，而是使用新值重新呈现组件，并使用捕获的新值创建

handleClick

的新实例。但是，全局侦听器仍然使用未定义的

存储函数的旧版本

您可以使用
useRef
或将
handleClick
包装到
useCallback
中，并将其作为依赖项添加到
useffect
中，以获得所需的结果

useRef
允许您在渲染之间保留引用：

const showState=useRef（）；
函数handleClick（事件）{
console.log（showState.current）；
};
函数toggleState（）{
showState.current=true；
}

但是，您应该记住，
useRef
不会触发重新渲染

使用
useCallback
：

const[showState，setState]=useState（）；
const handleClick=useCallback（（）=>{
console.log（showState）；
}，[showState]）；
useffect（（）=>{
document.addEventListener（'click'，handleClick）；
return（）=>{
document.removeEventListener（'click'，handleClick）；
}
}，[handleClick]）；

这样，每次
showState
更改创建的
handleClick
的新实例时，在闭包中使用新值，
useffect
被触发，重新连接事件侦听器。
尝试禁用
useCapture
，方法是将
false
传递给
addEventListener
@bertdida它不起作用