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