React如何立即更新DOM
更新時(shí)間：2024年01月03日 09:15:01 作者：田本初
這篇文章主要介紹了React如何立即更新DOM問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
React立即更新DOM
正常情況下
react會(huì)等待set完畢后再進(jìn)行頁面渲染，所以在set時(shí)無法拿到更新后的dom
import { useRef, useState } from "react"
export default () => {
const div = useRef(null)
const [count, setCount] = useState(0)
const btnClick = () => {
setCount(count + 1)
console.log(div.current.innerHTML)
}
return (
<>
<div ref={div}>count:{count}</div>
<button onClick={btnClick}>+1</button>
</>
)
}
但flushSync可以強(qiáng)制React同步刷新提供的回調(diào)中的任何更新
有點(diǎn)像Vue中的$nextTick
import { useRef, useState } from "react"
import { flushSync } from "react-dom"
export default () => {
const div = useRef(null)
const [count, setCount] = useState(0)
const btnClick = () => {
flushSync(() => {
setCount(count + 1)
})
console.log(div.current.innerHTML)
}
return (
<>
<div ref={div}>count:{count}</div>
<button onClick={btnClick}>+1</button>
</>
)
}
但是flashSync會(huì)喪失自動(dòng)批處理（多次set只會(huì)重新渲染一次）
非必要情況下，不太建議使用
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談箭頭函數(shù)寫法在ReactJs中的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家介紹了ahooks整體架構(gòu)及React工具庫的源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了react實(shí)現(xiàn)換膚功能的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案
這篇文章主要介紹了基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
本篇文章主要介紹了React應(yīng)用中使用Bootstrap的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了詳解react組件通訊方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了React中的for循環(huán)解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
react實(shí)現(xiàn)瀏覽器自動(dòng)刷新的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)瀏覽器自動(dòng)刷新的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了解決react組件渲染兩次的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了React 使用Effect Hook的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03