ReactHook中useState更新延迟问题及解决.docx

第

ReactHook中useState更新延迟问题及解决

目录ReactHook中useState更新延迟ReactHookuseState连续更新对象问题

ReactHook中useState更新延迟

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

例如以下代码错误实例

const[zoom,setZoom]=useState(0);

useEffect(()={

??document.getElementById(workspace-content).addEventListener(mousewheel,scrollFunc);

},[]);

functionscrollFunc(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);//记得解绑事件

functionscrollFunc(e){

??setZoom(zoom+5)

}

方法二：将改变函数移入useEffect并将第二个参数设置为state

依旧用上面的例子

解决方法：正确示例

useEffect(()={

??document.getElementById(workspace-content).addEventListener(mousewheel,scrollFunc);

??return()=document.getElementById(workspace-content).removeEventListener(mousewheel,scrollFunc);

??functionscrollFunc(e){

????setZoom(zoom+5)e.preventDefault()

??}

},[zoom]);

方法三：使用Ref,在useEffect内监听此ref,并实时跟useState同步

例如下面的代码错误示例

const[currentIndex,setCurrentIndex]=useState(0)

?consthandleLeft=()={

???setCurrentIndex(currentIndex+1)

???console.log(currentIndex)

?}

初始化currentIndex为0每次执行handleLeft函数是让currentIndex加1,之后立即获取currentIndex的值发现第一次执行currentIndex=0

第二次执行currentIndex=1每次都跟实际情况差一个查阅资料发现useState必须要执行完react整个生命周期才会获取最新值

解决方案：用useRef中转,并实时同步给useState

const[currentIndex,setCurrentIndex]=useState(0)

constcurrentIndexRef=useRef(0);

?consthandleLeft=()={

???currentIndexRef.current+=1

???console.log(currentIndexRef.current)

useEffect(()={

??setCurrentIndex(currentIndexRef.current)

},[currentIndexRef.current])

ReactHookuseState连续更新对象问题

reacthook的useState更新是异步的，所以在连续更新出发useState时会出现问题

eg