您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“React setState異步原理是什么”,內(nèi)容詳細,步驟清晰,細節(jié)處理妥當(dāng),希望這篇“React setState異步原理是什么”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
開發(fā)中當(dāng)組件中的狀態(tài)發(fā)生了變化,頁面并不會重新渲染。我們必須要通過setState來告知React數(shù)據(jù)已經(jīng)發(fā)生了變化,重新渲染頁面。
先來看下面的例子:
constructor() { super(); this.state = { message: "Hello World", }; } changeText() { this.setState({ message: "Hello React", }); console.log(this.state.message); // Hello World }
最終打印的結(jié)果是Hello World;
可見setState是異步的操作,我們并不能在執(zhí)行完setState之后立馬拿到最新的state的結(jié)果
setState設(shè)計為異步,可以顯著的提升性能
如果每次調(diào)用setState都進行一次更新,那么意味著render函數(shù)會被頻繁調(diào)用,界面重新渲染,這樣效率是很低的;
最好的辦法是獲取多個更新,之后進行批量處理;
如果同步更新了state,但是還沒有執(zhí)行render函數(shù),那么state和props不能保持同步;
state和props不能保持一致性,會在開發(fā)中產(chǎn)生很多的問題;(比如,組件嵌套時影響子組件中的狀態(tài))
setState的回調(diào)
setState接受兩個參數(shù):第二個參數(shù)是一個回調(diào)函數(shù),這個回調(diào)函數(shù)會在更新后會執(zhí)行;
changeText() { this.setState({ message: "Hello React", },()=>{ console.log('-----',this.state.message); // Hello React }); }
也可以在生命周期函數(shù)中獲?。?/p>
componentDidUpdate(prevProps, prevState, snapshot){ console.log(this.state.message);// Hello React }
React18版本之前
其實可以分成兩種情況:
在組件生命周期或React合成事件中,setState是異步的;
在setTimeout或者原生DOM事件中,setState是同步的
驗證一:在setTimeout中的更新:
setTimeout(() => { this.setState({ message: "Hello React", }); console.log(this.state.message); // Hello React }, 0);
驗證二:原生DOM事件:
componentDidMount() { const btnEl = document.querySelector("#btn"); btnEl.addEventListener("click", () => { this.setState({ message: "Hello React", }); console.log(this.state.message); // Hello React }); }
React18版本之后
setState默認是異步的
在React18之后,默認所有的操作都被放到了批處理中(異步處理)
如果希望代碼可以同步拿到,則需要執(zhí)行特殊的flushSync操作:
import { flushSync } from "react-dom"; changeText() { flushSync(() => { this.setState({ message: "Hello React", }); }); console.log(this.state.message); // Hello React }
讀到這里,這篇“React setState異步原理是什么”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。