react調(diào)用setstate實(shí)例分析

這篇文章主要介紹“react調(diào)用setstate實(shí)例分析”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“react調(diào)用setstate實(shí)例分析”文章能幫助大家解決問題。

react調(diào)用setstate后會(huì)發(fā)生：1、將傳入的參數(shù)對(duì)象與組件當(dāng)前的狀態(tài)合并，觸發(fā)調(diào)和過程；2、根據(jù)新的狀態(tài)構(gòu)建React元素樹并重新渲染整個(gè)UI界面；3、得到元素樹之后，React會(huì)計(jì)算出新的樹與老樹的節(jié)點(diǎn)差異，然后進(jìn)行最小化重渲染。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react調(diào)用setstate后發(fā)生了什么

React設(shè)計(jì)setState方法就是為了重新渲染頁面

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

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

setState(stateChange, [callback])，stateChange為對(duì)象, callback是可選的回調(diào)函數(shù), 在狀態(tài)更新且界面更新后才執(zhí)行

總結(jié): 對(duì)象方式是函數(shù)方式的簡寫方式 如果新狀態(tài)不依賴于原狀態(tài) ===> 使用對(duì)象方式 如果新狀態(tài)依賴于原狀態(tài) ===> 使用函數(shù)方式 如果需要在setState()后獲取最新的狀態(tài)數(shù)據(jù), 在第二個(gè)callback函數(shù)中讀取

調(diào)用 setState 之后發(fā)生了什么？

在代碼中調(diào)用setState函數(shù)之后，React 會(huì)將傳入的參數(shù)對(duì)象與組件當(dāng)前的狀態(tài)合并，然后觸發(fā)所謂的調(diào)和過程（Reconciliation）。

經(jīng)過調(diào)和過程，React 會(huì)以相對(duì)高效的方式根據(jù)新的狀態(tài)構(gòu)建 React 元素樹并且著手重新渲染整個(gè)UI界面。

在 React 得到元素樹之后，React 會(huì)自動(dòng)計(jì)算出新的樹與老樹的節(jié)點(diǎn)差異，然后根據(jù)差異對(duì)界面進(jìn)行最小化重渲染。

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

關(guān)于“react調(diào)用setstate實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。