React state狀態(tài)屬性用法講解
類組件中的state
setState的用法
React項目中UI改變來源于state的改變,類組件中setState是更新組件,渲染視圖的主要方式
基本用法
setState(obj,callback)
- 第一個參數(shù):當obj是一個對象,即為即將合并的state;如果obj是一個函數(shù),那么當組件的state和props將作為參數(shù),返回值用于合并新的state
- 第二個參數(shù)callback:callback為一個函數(shù),函數(shù)執(zhí)行上下文中可以獲取當前setState更新后的最新的值,可以作為依賴state變化的副作用函數(shù),可以用來做一些基本的DOM操作
/* 第一個參數(shù)為function類型 */ this.setState((state,props)=>{ return {number:} }) /* 第一個參數(shù)為object類型 */ this.setState({ number:1 },()=>{ console.log(this.state.number) //獲取最新的number })
加入一次事件中觸發(fā)一次如上的setState,在React底層主要做了哪些事呢?
- 首先,setState會產(chǎn)生當前更新的優(yōu)先級------產(chǎn)生更新優(yōu)先級
- 接下來React會從fiber Root根部fiber向下調(diào)和子節(jié)點,調(diào)和階段將對比發(fā)生更新的彼方,更新對比expirationTime,找到發(fā)生更新的組件,合并state,然后觸發(fā)render函數(shù),得到最新的UI視圖,完成render階段--------對比
- 接下來到commit階段,commit階段,替換真實DOM,完成此次更新流程。--------替換真實DOM
- 此時仍然在commit階段,會執(zhí)行setState中callback函數(shù),如上的()=>{console.log(this.state.number)} ,到此為止就完成了一次setState的過程。
更新的流層圖如下:
要記住一個主要任務(wù)的先后順序,這對于弄清渲染過程會有幫助:
render階段render函數(shù)執(zhí)行--->commit階段真實DOM替換--->setState回調(diào)函數(shù)執(zhí)行callback
類組件如何限制state更新視圖
對于類組件如何顯示state帶來的更新作用呢?
- pureComponet可以對state和props進行淺比較,如果沒有發(fā)生變化,那么組件就不會更新
- shouldComponentUpdate生命周期可以通過判斷前后state變化來決定組件需不需要更新,需要更新返回true,否則返回false
setState原理揭秘
知其然,知其所以然,下面將介紹setState的底層邏輯,要弄清楚state的更新機制,所以接下來要從兩個方向分析
- 一是揭秘enqueueSetState到底做了什么?
- 二是React底層是如何進行批量更新的?
首先,這里極簡了一下enqueueSetState的代碼,如下:
enqueueSetState(){ //每次調(diào)用setState,react都會創(chuàng)建一個update里面保存了如下 const update= createUpdate(expirationTime,suspenseConfig) //callback 可以理解為setState回調(diào)函數(shù),第二個參數(shù) callback && (update.callback=callback) //enqueuUpdate 把當前的update 傳入當前fier ,待更新隊列中 enqueuUpdate(fiber,update) //開始調(diào)度更新 scheduleUpdateOnFiber(fiber,expirationTime) }
enqueueSetState作用實際很簡單,就是創(chuàng)建一個update,然后放入當前的fiber對象的待更新隊列中,最后開啟調(diào)度更新,進入上述講到的更新流程。
那么問題來了,React的batchUpdate批量更新是什么時候加上去的呢?
這就要提前聊到事件系統(tǒng)了,正常的state更新,UI交互,都離不開用戶的事件,比如點擊事件,表單輸入等,React是采用事件合成的形式,每一個事件都是由React事件系統(tǒng)統(tǒng)一調(diào)度的,那么State批量更新正是和事件系統(tǒng)息息相關(guān)的。
//在legcy模式下,所有的事件都將經(jīng)過此函數(shù)統(tǒng)一處理 function dispatchEventFoLegacyPluginEventSystem(){ //handleTopLevel 事件處理函數(shù) batchEventUpdates(handleTopLvele,bookKeeping) }
batchEventUpdates方法具體如下:
batchEventUpdate(fn,a){ //開啟批量更新 isBatchingEventUpdates=true; try{ //這里執(zhí)行了事處理函數(shù),比如在一次點擊事件中觸發(fā)setState,那么它將在這個函數(shù)執(zhí)行 return batchEventUpdateImpl(fn,a,b); }finally{ //try里面的return 不會影響finally執(zhí)行 //完成一次事件,批量更新 isBatchingEventUpdates=false } }
如上分析出流程圖,在React事件執(zhí)行之前通過isBatchEventUpdates=true打開開關(guān)開啟事件批量更新,當該事件結(jié)束,再通過isBactchEventUpdates=false;關(guān)閉開關(guān),然后在scheduleUpdateOnFiber中根據(jù)開關(guān)來確定是否進行批量更新
舉個例子,如下組件中這么寫:
import React, { Component } from 'react'; export default class Test extends Component { state={number:0} handleClick=()=>{ this.setState({number:this.state.number+1},()=>{ console.log('callback1',this.state.number) }) console.log(this.state.number) this.setState({number:this.state.number+1},()=>{ console.log('callback2',this.state.number) }) console.log(this.state.number) this.setState({number:this.state.number+1},()=>{ console.log('callback3',this.state.number) }) console.log(this.state.number) } render() { return ( <div> {this.state.number} <button onClick={this.handleClick}>number++</button> </div> ); } }
點擊打印結(jié)果:0,0,0 callback1 1 ,callback2 1,callback3 1
如上代碼,在整個React上下文執(zhí)行棧中會變成這樣:
那么,為什么異步操作里面的批量更新規(guī)則會被打破呢?比如用promise或者setTime在handleClick中這么寫:
handleClick=()=>{ setTimeout(()=>{ this.setState({number:this.state.number+1},()=>{ console.log('callback1',this.state.number) }) console.log(this.state.number) this.setState({number:this.state.number+1},()=>{ console.log('callback2',this.state.number) }) console.log(this.state.number) this.setState({number:this.state.number+1},()=>{ console.log('callback3',this.state.number) }) console.log(this.state.number) }) }
打?。篶allback1 1,1,callback2 2,2,callback3 3 ,3
那么整個React上下文執(zhí)行棧就會變成如圖這樣
所以批量更新規(guī)則被打破。
那么,如果在如上異步環(huán)境下,繼續(xù)開啟批量更新模式呢?
React-Dom提供了批量更新方法unstable_batchChedUpdates,可以去手動批量更新,可以將上述setTimeout里面的內(nèi)容作如下修改:
import ReactDom from 'react-dom'; const {unstable_batchedUpdates}=ReactDom
setTimeout(()=>{ unstable_batchedUpdates(()=>{ this.setState({number:this.state.number+1},()=>{ console.log('callback1',this.state.number) }) console.log(this.state.number) this.setState({number:this.state.number+1},()=>{ console.log('callback2',this.state.number) }) console.log(this.state.number) this.setState({number:this.state.number+1},()=>{ console.log('callback3',this.state.number) }) console.log(this.state.number) }) })
點擊打印結(jié)果:0,0,0 callback1 1 ,callback2 1,callback3 1
在實際工作中,unstable_batchChedUpdates可以用于Ajax數(shù)據(jù)交互之后,合并多次setState,或者是多次useState。原因很簡單,所有的數(shù)據(jù)交互都是在異步環(huán)境下,如果沒有批量更新處理,一次數(shù)據(jù)交互多次改變state會促使視圖多次渲染。
那么如何提升更新優(yōu)先級呢?
React-dom提供了flushSync,flushSync可以將回調(diào)函數(shù)中的更新任務(wù),放在一個比較高的優(yōu)先級中。React設(shè)定了很多不同優(yōu)先級的更新任務(wù),如果一次更新任務(wù)在flushSync回調(diào)內(nèi)部,那么將獲得一個比較高優(yōu)先級的更新。
函數(shù)組件中的state
React-hooks發(fā)布之后,useState可以使函數(shù)組件像類組件一樣擁有state,也就是說名函數(shù)組件可以通過useState來改變UI視圖。那么useState到底應(yīng)該如何使用,底層優(yōu)勢怎么運行的呢?
useState的用法
const [state,setState] = useState(initData)
- state,目的是提供給UI,作為渲染視圖的數(shù)據(jù)源
- setState改變state的函數(shù),可以理解為推動函數(shù)組件渲染的渲染函數(shù)
- initData有兩種情況,第一種情況是非函數(shù),將作為state的初始化的值,第二種情況是函數(shù),函數(shù)返回值作為作為useState初始化的值
initData為函數(shù)的情況:
const [number,setNumber]= React.useState(0)
initData為函數(shù)的情況:
const [number,setNumber]=React.useState(()=>{ //props中的a=1 state為0-1隨機數(shù) //props中a=2 state為1-10的隨機數(shù) //否則 state為1-100的隨機數(shù) if(props.a===1) return Math.random() if(props.a===2) return Math.ceil(Math.random()*10) return Math.ceil(Math.random()*100) })
對于setState參數(shù),也有兩種情況:
- 第一種是非函數(shù)情況,此時將作為新的值,賦予state,作為下一次渲染使用;
- 第二種是函數(shù)的情況,如果setState的參數(shù)是一個函數(shù),這里可以稱它為reducer,reducer參數(shù),是上一次返回最新的state,返回值作為新的state
setState參數(shù)是一個非函數(shù)的情況:
const [number,setNumber]= React.useState(0) const handleClick=()=>{ setNumber(1) setNumber(2) setNumber(3) }
setState參數(shù)是一個函數(shù)的情況:
const [number,setNumber]= React.useState(0) const handleClick=()=>{ setNumber((state)=>{ return state+1//0+1=1 }) setNumber(8)//8 setNumber((state)=>{ return state+1//8+1=9 }) }
如何監(jiān)聽state的變化
類組件中的setState中,有第二個參數(shù)callback或是生命周期函數(shù)componentDidUpdate可以檢測監(jiān)聽到state改變或是組件更新。
那么在函數(shù)組件中,如何監(jiān)聽state變化呢?這個時候就需要useEffect出場了,通??梢园裺tate作為依賴項傳入useEffect第二個參數(shù)deps,但是注意useEffect初始化是會默認執(zhí)行一遍。
import React,{useEffect, useState} from 'react' import ReactDom from 'react-dom' export default function Test() { const [number,setNumber]= React.useState(0) const handleClick=()=>{ ReactDom.flushSync(()=>{ setNumber(2) }) setNumber(1) setTimeout(()=>{ setNumber(3) }) } useEffect(()=>{ console.log('變化',number) },[number]) console.log(number) return ( <button onClick={handleClick}>text1</button> ) }
執(zhí)行結(jié)果:
setState(dispatch)更新特點
上述講到的批量更新和flushSync,在函數(shù)組件中,dispatch更新效果和類組件是一樣的,但是useState有一點值得注意,就是當?shù)蹛塾酶淖僺tate的函數(shù)dispatch,在本次函數(shù)執(zhí)行上下文中,是獲取不到state的值的,舉例如下:
const [number,setNumber]= React.useState(0) const handleClick=()=>{ ReactDom.flushSync(()=>{ setNumber(2) console.log(number) }) setNumber(1) console.log(number) setNumber(()=>{ setNumber(3) console.log(number) }) }
結(jié)果:0 0 0
原因很簡單,函數(shù)組件更新就是函數(shù)的執(zhí)行,在函數(shù)一次執(zhí)行過程中,函數(shù)內(nèi)部所有變量重新生命,所以改變的state,只有在下一次函數(shù)組件執(zhí)行時才會更新,所以在如同上一個函數(shù)執(zhí)行上下文中,number一直為0,無論怎么打印,都拿不到最新的state。
useState的注意事項
在使用useState的dispatchAction更新state的時候,記得不要傳入相同的state,這樣會使視圖不更新,比如下面:
const [state,dispatchState]= React.useState({ name:'aline' }) const handleClick=()=>{ state.name='aline' dispatchState(state)//直接改變state,在內(nèi)存中執(zhí)行的地址沒有變 }
上述例子為什么沒有更新呢?是因為在useState的dispatchAction處理邏輯中,會淺比較state兩次,發(fā)現(xiàn)state相同,不會開啟更新調(diào)度任務(wù)。其中demo中兩次state指向了相同的內(nèi)存空間,所以默認為state相等,就不會發(fā)生視圖更新了
解決問題:把上述的dispatchState改成dispatch({...state})根本解決了問題,淺拷貝了對象,重新開啟了內(nèi)存空間。
總結(jié)
類組件中的setState和函數(shù)組件中的useState有什么異同?
相同點
首先從原理角度出發(fā),setState和useState更新視圖,底層都調(diào)用了scheduleUpdateOnFiber方法,而且時間驅(qū)動情況下都有批量更新規(guī)則
不同點
- 再不是pureComponent組件模式下,setState不會淺比較兩次的state的值,只有調(diào)用setState,在沒有其他優(yōu)化手段的前提下,會執(zhí)行更新,但是useState中的dispatchAction會默認比較兩次state是否相同,然后決定是否更新組件
- setState有專門監(jiān)聽state變化的回調(diào)函數(shù)callback,著這個回調(diào)函數(shù)中可以獲取到最新的值,而在函數(shù)組件中,只能通過useEffect來執(zhí)行state變化引起副作用。
- setState在頂層處理state的邏輯主要是和舊state進行合并操作,而useState則是替換,及重新賦值
到此這篇關(guān)于React state狀態(tài)屬性用法講解的文章就介紹到這了,更多相關(guān)React state狀態(tài)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React Native AsyncStorage本地存儲工具類
這篇文章主要為大家分享了React Native AsyncStorage本地存儲工具類,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10使用React-Window實現(xiàn)虛擬滾動效果的示例代碼
React-Window?是一個為?React?應(yīng)用程序中高效渲染大數(shù)據(jù)集而設(shè)計的庫,它基于窗口化或虛擬化的原則運行,本文將使用React-Window實現(xiàn)虛擬滾動效果,感興趣的可以了解下2024-01-01