您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“React18狀態(tài)批處理怎么使用”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
18版本之前, 在合成事件之外的原生事件中(例如 setTimeout, onclick, promise) , 更新狀態(tài)并不會(huì)進(jìn)行批量處理(合并), 這意味著在原生事件中多次調(diào)用狀態(tài)更新會(huì)造成多次應(yīng)用的重新渲染, 往往我們只需要最后一次即可, react在18版本后優(yōu)化了這個(gè)問題
import { useState } from 'react' function App() { const [num1, setNum1] = useState(1) const [num2, setNum2] = useState(1) const add = () => { setTimeout(() => { setNum1((pre) => pre + 1) setNum2((pre) => pre + 1) }) } console.log('渲染了') return ( <div className="App"> <header className="App-header">react 18</header> <p>num1 : {num1}</p> <p>num2 : {num2}</p> <button onClick={add}>+1</button> </div> ) } export default App
點(diǎn)擊四下后,組件渲染了8次
點(diǎn)擊4下后, 組件渲染了4次
在某些場(chǎng)景下 我們可能不需要批處理狀態(tài)更新, 此時(shí)我們需要用到 react-dom 提供的flushSync函數(shù), 該函數(shù)需傳入一個(gè)回調(diào), 并且會(huì)同步刷新回調(diào)中的狀態(tài)更新
import { useState } from 'react' import { flushSync } from 'react-dom' function App() { const [num1, setNum1] = useState(1) const [num2, setNum2] = useState(1) const add = () => { setTimeout(() => { flushSync(() => { setNum1((pre) => pre + 1) }) flushSync(() => { setNum2((pre) => pre + 1) }) }) } console.log('渲染了') console.log(num1, num2) return ( <div className="App"> <header className="App-header">react 18</header> <p>num1 : {num1}</p> <p>num2 : {num2}</p> <button onClick={add}>+1</button> </div> ) } export default App
1. 原生事件內(nèi)狀態(tài)更新改為批量處理
2. 不需要批量處理時(shí) 使用 react-dom 提供的flushSync函數(shù), 此函數(shù)同步刷新參數(shù)回調(diào)內(nèi)的狀態(tài)更新
“React18狀態(tài)批處理怎么使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。