React Hook中useState更新延迟问题

最新推荐文章于 2024-11-04 11:15:03 发布

CahierX

最新推荐文章于 2024-11-04 11:15:03 发布

阅读量2.6w

点赞数 7

分类专栏： react 文章标签： react react hook useState useRef

本文链接：https://blog.csdn.net/qq_35493664/article/details/105195549

版权

本文探讨了在React Hook中遇到useState更新延迟的问题，并提出了三种解决方法：移除useEffect的第二个参数，将更改函数放入useEffect并设置依赖，以及使用useRef进行同步。详细解释了错误实例和正确解决方案。

摘要由CSDN通过智能技术生成

方法一: 去掉useEffect的第二个参数

例如以下代码错误实例

const[zoom, setZoom] = useState(0);
useEffect(() = >{
    document.getElementById('workspace-content').addEventListener('mousewheel', scrollFunc);
},[]);
function scrollFunc(e) {
    setZoom(zoom + 5)
}

会出现zoom永远等于 0+5, 而不是所谓的5, 10 ,15 为什么会这样呢? 因为useEffect执行时，会创建一个闭包，在每次监听到mousewheel运行时闭包内部保存了zoom的初始化值每次调用的时候都是取的初始化值0 所有会一直为0+5

怎么解决呢?

解决方案: 去掉useEffect中的空数组即可

const[zoom, setZoom] = useState(0);
useEffect(() = >{
    document.getElementById('workspace-content').addEventListener('mousewheel', scrollFunc);
    return () = >document.getElementById('workspace-content').removeEventListener("mousewheel", scrollFu