React如何立即更新DOM
更新時(shí)間：2024年01月03日 09:15:01 作者：田本初
這篇文章主要介紹了React如何立即更新DOM問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
React立即更新DOM
正常情況下
react會等待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會喪失自動批處理（多次set只會重新渲染一次）
非必要情況下，不太建議使用
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React源碼state計(jì)算流程和優(yōu)先級實(shí)例解析
這篇文章主要為大家介紹了React源碼state計(jì)算流程和優(yōu)先級實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了詳解React中共享組件邏輯的三種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
React項(xiàng)目經(jīng)驗(yàn)總結(jié)及遇到的坑
這篇文章主要介紹了React項(xiàng)目經(jīng)驗(yàn)總結(jié),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了解決React初始化加載組件會渲染兩次的問題,文中有出現(xiàn)這種現(xiàn)象的原因及解決方法,感興趣的同學(xué)跟著小編一起來看看吧2023-08-08
很多朋友向小編反映一個(gè)問題關(guān)于React onClick 傳遞參數(shù)的問題，當(dāng)點(diǎn)擊刪除按鈕需要執(zhí)行刪除操作，針對這個(gè)問題該如何處理呢？下面小編給大家?guī)砹薘eact onClick 傳遞參數(shù)的問題，感興趣的朋友一起看看吧2021-10-10
現(xiàn)在最熱門的前端框架，毫無疑問是 React 。下面這篇文章主要給大家分享了關(guān)于想用好React的你必須要知道的一些事情，文中介紹的非常詳細(xì)，對大家具有一定參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要介紹了如何使用React構(gòu)建一個(gè)擲骰子的小游戲,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-12-12
ES6 class類鏈?zhǔn)嚼^承，實(shí)例化及react super(props)原理詳解
這篇文章主要介紹了ES6 class類鏈?zhǔn)嚼^承，實(shí)例化及react super(props)原理,結(jié)合實(shí)例形式詳細(xì)分析了ES6 中class類鏈?zhǔn)嚼^承，實(shí)例化及react super(props)原理相關(guān)概念、原理、定義與使用技巧,需要的朋友可以參考下2020-02-02
我們知道，在React中沒有像Vue那種數(shù)據(jù)雙向綁定的效果。而this.setState方法就是用來對數(shù)據(jù)進(jìn)行更改的。而通過this.setState方法更改的數(shù)據(jù)，會讓組件的render重新渲染，并且刷新數(shù)據(jù)2022-09-09
由于 create-react-app 使用 webpack 作為其模塊打包器,你需要修改 webpack 的配置來支持 .less 文件,這篇文章主要介紹了在react配置使用less的完美方案,需要的朋友可以參考下2024-04-04