我是靠谱客的博主 直率康乃馨，最近开发中收集的这篇文章主要介绍React Hook中useState更新延迟问题方法一: 去掉useEffect的第二个参数方法二: 将改变函数移入useEffect并将第二个参数设置为state方法三: 如果不在意视图实时渲染 采用Ref代替useState或者全局变量，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
方法一: 去掉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", scrollFunc);
// 记得解绑事件
-
});
-
function scrollFunc(e) {
-
setZoom(zoom +
5)
-
}
方法二: 将改变函数移入useEffect并将第二个参数设置为state
依旧用上面的例子
解决方法: 正确示例
-
useEffect(() = >{
-
document.getElementById(
'workspace-content').addEventListener(
'mousewheel', scrollFunc);
-
return () = >
document.getElementById(
'workspace-content').removeEventListener(
"mousewheel", scrollFunc);
-
function scrollFunc(e) {
-
setZoom(zoom +
5) e.preventDefault()
-
}
-
},[zoom]);
方法三: 如果不在意视图实时渲染 采用Ref代替useState或者全局变量
例如下面的代码 错误示例
-
const [currentIndex, setCurrentIndex] = useState(
0)
-
const handleLeft =
() => {
-
setCurrentIndex(currentIndex+
1)
-
console.log(currentIndex)
-
}
初始化currentIndex为0 每次执行handleLeft函 数是让currentIndex加1, 之后立即获取currentIndex的值发现 第一次执行currentIndex = 0
第二次执行currentIndex = 1 每次都跟实际情况差一个 查阅资料发现useState必须要执行完react整个生命周期才会获取最新值
解决方案: 用useRef代替
-
const currentIndexRef = useRef(
0);
// 不能用useState 会导致数据更新不及时
-
const handleLeft =
() => {
-
currentIndexRef.current +=
1
-
console.log(currentIndexRef.current)
-
}
最后
以上就是直率康乃馨为你收集整理的React Hook中useState更新延迟问题方法一: 去掉useEffect的第二个参数方法二: 将改变函数移入useEffect并将第二个参数设置为state方法三: 如果不在意视图实时渲染 采用Ref代替useState或者全局变量的全部内容，希望文章能够帮你解决React Hook中useState更新延迟问题方法一: 去掉useEffect的第二个参数方法二: 将改变函数移入useEffect并将第二个参数设置为state方法三: 如果不在意视图实时渲染 采用Ref代替useState或者全局变量所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复