欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React Hook中useState更新延遲問題及解決

 更新時間:2022年08月05日 12:18:49   作者:CahierX  
這篇文章主要介紹了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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • 淺談React底層實現(xiàn)原理

    淺談React底層實現(xiàn)原理

    本文主要介紹了淺談React底層實現(xiàn)原理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07
  • 淺析JS中什么是自定義react數(shù)據(jù)驗證組件

    淺析JS中什么是自定義react數(shù)據(jù)驗證組件

    我們在做前端表單提交時,經(jīng)常會遇到要對表單中的數(shù)據(jù)進行校驗的問題。這篇文章主要介紹了js中什么是自定義react數(shù)據(jù)驗證組件,需要的朋友可以參考下
    2018-10-10
  • react quill中圖片上傳由默認轉(zhuǎn)成base64改成上傳到服務器的方法

    react quill中圖片上傳由默認轉(zhuǎn)成base64改成上傳到服務器的方法

    這篇文章主要介紹了react quill中圖片上傳由默認轉(zhuǎn)成base64改成上傳到服務器的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • React大文件分片上傳原理及方案

    React大文件分片上傳原理及方案

    前端進行大文件分片上傳的方案幾乎都是利用Blob.prototype.slice方法對文件進行分片,用數(shù)組將每一個分片存起來,最后將分片發(fā)給后端,本文給大家介紹React大文件分片上傳方案,感興趣的朋友跟隨小編一起看看吧
    2023-08-08
  • 淺談對于react-thunk中間件的簡單理解

    淺談對于react-thunk中間件的簡單理解

    這篇文章主要介紹了淺談對于react-thunk中間件的簡單理解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • React中的JSX??{?}的使用詳解

    React中的JSX??{?}的使用詳解

    這篇文章主要介紹了React中的JSX{?}的使用,React使用JSX來替代常規(guī)的JavaScript,JSX可以理解為的JavaScript語法擴展,它里面的標簽申明要符合XML規(guī)范要求,對React?JSX使用感興趣的朋友一起看看吧
    2022-08-08
  • 記一個React.memo引起的bug

    記一個React.memo引起的bug

    memo可以自己決定是否更新,但它是一個函數(shù)組件而非一個類,本文主要介紹了React.memo引起的bug,具有一定的參考價值,感興趣的可以了解一下
    2022-03-03
  • React中使用react-json-view展示JSON數(shù)據(jù)的操作方法

    React中使用react-json-view展示JSON數(shù)據(jù)的操作方法

    react-json-view是一個用于顯示和編輯javascript數(shù)組和JSON對象的React組件,本文給大家分享React中使用react-json-view展示JSON數(shù)據(jù)的操作方法,感興趣的朋友一起看看吧
    2023-12-12
  • React生命周期函數(shù)圖解介紹

    React生命周期函數(shù)圖解介紹

    生命周期函數(shù)指在某一時刻組件會自動調(diào)用并執(zhí)行的函數(shù)。React每個類組件都包含生命周期方法,以便于在運行過程中特定的階段執(zhí)行這些方法
    2022-11-11
  • 使用react-router4.0實現(xiàn)重定向和404功能的方法

    使用react-router4.0實現(xiàn)重定向和404功能的方法

    本篇文章主要介紹了使用react-router4.0實現(xiàn)重定向和404功能的方法,具有一定的參考價值,有興趣的可以了解一下
    2017-08-08

最新評論