首頁 > web前端 > 前端問答 > react呼叫setstate後發生了什麼

react呼叫setstate後發生了什麼

WBOY
發布: 2022-04-27 15:00:04
原創
3436 人瀏覽過

react呼叫setstate後會發生:1、將傳入的參數物件與元件目前的狀態合併,觸發調和過程;2、根據新的狀態建立React元素樹並重新渲染整個UI介面;3 、得到元素樹之後,React會計算出新的樹與老樹的節點差異,然後進行最小化重渲染。

react呼叫setstate後發生了什麼

本教學操作環境: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影片教學

以上是react呼叫setstate後發生了什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板