react調用setstate實例分析

蝸牛 互聯網技術資訊 2022-04-27 113 0

這篇文章主要介紹“react調用setstate實例分析”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“react調用setstate實例分析”文章能幫助大家解決問題。

react調用setstate后會發生:1、將傳入的參數對象與組件當前的狀態合并,觸發調和過程;2、根據新的狀態構建React元素樹并重新渲染整個UI界面;3、得到元素樹之后,React會計算出新的樹與老樹的節點差異,然后進行最小化重渲染。

本教程操作環境:Windows10系統、react17.0.1版、Dell G3電腦。

react調用setstate后發生了什么

React設計setState方法就是為了重新渲染頁面

setState()更新狀態的2種寫法

setState(updater, [callback]),updater為返回stateChange對象的函數: (state, props) => stateChange 接收的state和props被保證為最新的

setState(stateChange, [callback]),stateChange為對象, callback是可選的回調函數, 在狀態更新且界面更新后才執行

總結: 對象方式是函數方式的簡寫方式 如果新狀態不依賴于原狀態 ===> 使用對象方式 如果新狀態依賴于原狀態 ===> 使用函數方式 如果需要在setState()后獲取最新的狀態數據, 在第二個callback函數中讀取

調用 setState 之后發生了什么?

在代碼中調用setState函數之后,React 會將傳入的參數對象與組件當前的狀態合并,然后觸發所謂的調和過程(Reconciliation)。

經過調和過程,React 會以相對高效的方式根據新的狀態構建 React 元素樹并且著手重新渲染整個UI界面。

在 React 得到元素樹之后,React 會自動計算出新的樹與老樹的節點差異,然后根據差異對界面進行最小化重渲染。

在差異計算算法中,React 能夠相對精確地知道哪些位置發生了改變以及應該如何改變,這就保證了按需更新,而不是全部重新渲染。

關于“react調用setstate實例分析”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注蝸牛博客行業資訊頻道,小編每天都會為大家更新不同的知識點。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看