React Hook中useState更新延遲問題及解決
React Hook中useState更新延遲
方法一:去掉useEffect的第二個參數(shù)
例如以下代碼 錯誤實例
const[zoom, setZoom] = useState(0); useEffect(() = >{ ? ? document.getElementById('workspace-content').addEventListener('mousewheel', scrollFunc); },[]); function scrollFunc(e) { ? ? setZoom(zoom + 5) }
會出現(xiàn)zoom永遠等于 0+5, 而不是所謂的5, 10 ,15 為什么會這樣呢? 因為useEffect執(zhí)行時,會創(chuàng)建一個閉包,在每次監(jiān)聽到mousewheel運行時 閉包內(nèi)部保存了zoom的初始化值 每次調(diào)用的時候都是取的初始化值0 所有會一直為0+5
怎么解決呢?
解決方案: 去掉useEffect中的空數(shù)組即可
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) }
方法二:將改變函數(shù)移入useEffect并將第二個參數(shù)設置為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, 在useEffect內(nèi)監(jiān)聽此ref, 并實時跟useState同步
例如下面的代碼 錯誤示例
const [currentIndex, setCurrentIndex] = useState(0) ? const handleLeft = () => { ? ? ?setCurrentIndex(currentIndex+ 1) ? ? ?console.log(currentIndex) ? }
初始化currentIndex為0 每次執(zhí)行handleLeft函 數(shù)是讓currentIndex加1, 之后立即獲取currentIndex的值發(fā)現(xiàn) 第一次執(zhí)行currentIndex = 0
第二次執(zhí)行currentIndex = 1 每次都跟實際情況差一個 查閱資料發(fā)現(xiàn)useState必須要執(zhí)行完react整個生命周期才會獲取最新值
解決方案:用useRef中轉(zhuǎn),并實時同步給useState
const [currentIndex, setCurrentIndex] = useState(0) const currentIndexRef = useRef(0); ? const handleLeft = () => { ? ? ?currentIndexRef.current += 1 ? ? ?console.log(currentIndexRef.current) ? } useEffect(()=>{ ? ? setCurrentIndex(currentIndexRef.current) },[currentIndexRef.current])
React Hook useState連續(xù)更新對象問題
react hook 的useState更新是異步的,所以在連續(xù)更新出發(fā)useState時會出現(xiàn)問題
eg:
import React, {useState} from 'react'; ? export default () => { ? ? const [obj, setObj] = useState({ ? ? ? ? a: 1, ? ? ? ? b: 2 ? ? ? }) ? ? ? const changeObj = () => { ? ? ? ? // 連續(xù)觸發(fā)2次setObj(實際項目不會這樣寫,我這樣寫只是為了模擬連續(xù)觸發(fā)2次setObj帶來的問題) ? ? ? ? setObj({...obj, a: 2}) ? ? ? ? setObj({...obj, b: 3})? ? ? } ? ?return (<div onClick={changeObj}> ? ? ? ? ? // 此時頁面上顯示的值為 {a: 1, b: 3}, 出現(xiàn)該問題的原因是因為useState是異步的,在第二次觸發(fā)setObj時,obj還是沒更新a之前的obj,所以出現(xiàn)該結果 ? ? ? ? ? ? {JSON.stringify(obj)} ? ? ? ? ? ?</div>) }
解決此情況的方式,就是在第二次觸發(fā)時使用setObj((data) => ({...data, b: 3})) 這樣的方式
import React, {useState} from 'react'; ? export default () => { ? ? const [obj, setObj] = useState({ ? ? ? ? a: 1, ? ? ? ? b: 2 ? ? ? }) ? ? ? const changeObj = () => { ? ? ? ? // 連續(xù)觸發(fā)2次setObj(實際項目不會這樣寫,為了模擬情況) ? ? ? ? setObj({...obj, a: 2}) ? ? ? ? // data標識存儲的是更新a后的對象,用這樣的方式可以解決連續(xù)觸發(fā)2次帶來的問題 ? ? ? ? setObj((data) => ({...data, b: 3}))? ? ? } ? ?return (<div onClick={changeObj}> ? ? ? ? ? // 此時頁面上顯示的值為 {a: 2, b: 3} ? ? ? ? ? ? {JSON.stringify(obj)} ? ? ? ? ? ?</div>) }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
淺析JS中什么是自定義react數(shù)據(jù)驗證組件
我們在做前端表單提交時,經(jīng)常會遇到要對表單中的數(shù)據(jù)進行校驗的問題。這篇文章主要介紹了js中什么是自定義react數(shù)據(jù)驗證組件,需要的朋友可以參考下2018-10-10react quill中圖片上傳由默認轉(zhuǎn)成base64改成上傳到服務器的方法
這篇文章主要介紹了react quill中圖片上傳由默認轉(zhuǎn)成base64改成上傳到服務器的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-10-10React中使用react-json-view展示JSON數(shù)據(jù)的操作方法
react-json-view是一個用于顯示和編輯javascript數(shù)組和JSON對象的React組件,本文給大家分享React中使用react-json-view展示JSON數(shù)據(jù)的操作方法,感興趣的朋友一起看看吧2023-12-12使用react-router4.0實現(xiàn)重定向和404功能的方法
本篇文章主要介紹了使用react-router4.0實現(xiàn)重定向和404功能的方法,具有一定的參考價值,有興趣的可以了解一下2017-08-08