為什么使用setState
在React 的開(kāi)發(fā)過(guò)程中，難免會(huì)與組件的state打交道。使用過(guò)React 的都知道，想要修改state中的值，必須使用內(nèi)部提供的setState 方法。為什么不能直接使用賦值的方式修改state的值呢？我們就分析一下，先看一個(gè)demo。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
class Index extends React.Component { this.state = { count: 0 } onClick = () => { this.setState({ count: 10 }) } render() { return ( <div> <span>{this.state.count}</span> <button onClick={this.onClick}>click</button> </div> ) }} |
根據(jù)上面代碼可以看到，點(diǎn)擊按鈕后把state 中 count 的值修改為 10。并更新頁(yè)面的顯示。所以state的改變有兩個(gè)作用：對(duì)應(yīng)的值改變 和 **頁(yè)面更新。**要想做到這兩點(diǎn)在react 中 非 setState 不可。 假如說(shuō)我們把 onClick 的方法內(nèi)容修改為 this.state.count = 10 并在方法內(nèi)打印出 this.state 的值，可以看到state的值已經(jīng)改變。但是頁(yè)面并沒(méi)有更新到最新的值。 ☆總結(jié)一下：
- state 值的改變，目的是頁(yè)面的更新，希望React 使用最新的 state來(lái)渲染頁(yè)面。但是直接賦值的方式并不能讓React監(jiān)聽(tīng)到state的變化。
- 必須通過(guò)setState 方法來(lái)告訴React state的數(shù)據(jù)已經(jīng)變化。
☆擴(kuò)展一下：
在vue中，采用的就是直接賦值的方式來(lái)更新data 數(shù)據(jù)，并且Vue也能夠使用最新的data數(shù)據(jù)渲染頁(yè)面。這是為什么呢？ 在vue2中采用的是 Object.defineProperty() 方式監(jiān)聽(tīng)數(shù)據(jù)的get 和 set 方法，做到數(shù)據(jù)變化的監(jiān)聽(tīng) 在vue3中采用的是ES6 的 proxy 方式監(jiān)聽(tīng)數(shù)據(jù)的變化
setState 的用法
想必所有人都會(huì)知道setState 的用法，在這里還是想記錄一下： setState方法有兩個(gè)參數(shù)：第一個(gè)參數(shù)可以是對(duì)象直接修改屬性值，也可以是函數(shù)能夠拿到上一次的state值。第二個(gè)參數(shù)是一個(gè)可選的回調(diào)函數(shù)，可以獲取最新的state值 回調(diào)函數(shù)會(huì)在組件更新完成之后執(zhí)行，等價(jià)于在 componentDidUpdate 生命周期內(nèi)執(zhí)行。
- 第一個(gè)參數(shù)是對(duì)象時(shí)：如同上文的demo一樣，直接修改state的屬性值
|
1
2
3
|
this.setState({ key:newState}) |
- 第一個(gè)參數(shù)是函數(shù)時(shí)：在函數(shù)內(nèi)可以獲取上一次state 的屬性值。
|
1
2
3
4
5
6
|
// prevState 是上一次的 state，props 是此次更新被應(yīng)用時(shí)的 propsthis.setState((prevState, props) => { return { key: prevState.key }}) |
異步更新還是同步更新
setState() 將對(duì)組件 state 的更改排入隊(duì)列，并通知 React 需要使用更新后的 state 重新渲染此組件及其子組件。這是用于更新用戶界面以響應(yīng)事件處理器和處理服務(wù)器數(shù)據(jù)的主要方式 將 setState() 視為請(qǐng)求而不是立即更新組件的命令。為了更好的感知性能，React 會(huì)延遲調(diào)用它，然后通過(guò)一次傳遞更新多個(gè)組件。React 并不會(huì)保證 state 的變更會(huì)立即生效。
先修改一下上面的代碼，如果在onClick 方法中連續(xù)調(diào)用三次setState，根據(jù)上文可知 setState是一個(gè)異步的方式，每次調(diào)用只是將更改加入隊(duì)列，同步調(diào)用的時(shí)候只會(huì)執(zhí)行最后一次更新，所以結(jié)果是1而不是3。
|
1
2
3
4
5
6
|
onClick = () => { const { count } = this.state this.setState({ count: count + 1 }) this.setState({ count: count + 1 }) this.setState({ count: count + 1 })} |
可以把上面代碼理解為 Object.assign() 方法，
|
1
2
3
4
5
6
|
Object.assign( state, { count: state.count + 1 }, { count: state.count + 1 }, { count: state.count + 1 }) |
如果第一個(gè)參數(shù)傳入一個(gè)函數(shù)，連續(xù)調(diào)用三次，是不是和傳入對(duì)象方式的結(jié)果是一樣的呢？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
onClick = () => { this.setState((prevState, props) => { return { count: prevState.count + 1 } }) this.setState((prevState, props) => { return { count: prevState.count + 1 } }) this.setState((prevState, props) => { return { count: prevState.count + 1 } })} |
結(jié)果和傳入對(duì)象的方式大相徑庭，使用函數(shù)的方式就能夠?qū)崿F(xiàn)自增為3的效果。這又是為什么呢？ 在函數(shù)內(nèi)能夠拿到最新的state 和 props值。由上文可知 setState 的更新是分批次的，使用函數(shù)的方式確保了當(dāng)前state 是建立在上一個(gè)state 之上的，所以實(shí)現(xiàn)了自增3的效果。
☆總結(jié)一下： 為什么setState 方法是異步的呢？
- 可以顯著的提升性能，react16 引入了 Fiber 架構(gòu)，F(xiàn)iber 中對(duì)任務(wù)進(jìn)行了劃分和優(yōu)先級(jí)的分類，優(yōu)先處理優(yōu)先級(jí)比較高的任務(wù)。頁(yè)面的響應(yīng)就是一個(gè)優(yōu)先級(jí)比較高任務(wù)，所以如果setState是同步，那么更新一次就要更新一次頁(yè)面，就會(huì)阻塞到頁(yè)面的響應(yīng)。最好的辦法就是獲得到多個(gè)更新，之后進(jìn)行批量的更新。只更新一次頁(yè)面。
- 如果同步更新state，但是還沒(méi)有執(zhí)行render 函數(shù)，那么state 和 props 就不能夠保持同步。
**是不是所有的setState 都是異步的形式呢？**答案是 否！！！在React 中也會(huì)存在setState 同步的場(chǎng)景
|
1
2
3
4
5
6
7
8
|
onClick = () => { this.setState({ count: this.state.count + 1 }) console.log(this.state) setTimeout(() => { this.setState({ count: this.state.count + 1 }) console.log(this.state) }, 0)} |
上面的代碼會(huì)打印出**0，2。**這又是為什么呢？其實(shí)React 中的 setState 并不是嚴(yán)格意義上的異步函數(shù)。他是通過(guò)隊(duì)列的延遲執(zhí)行實(shí)現(xiàn)的。使用 isBatchingUpdates 判斷當(dāng)前的setState 是加入到更新隊(duì)列還是更新頁(yè)面。當(dāng) isBatchingUpdates=ture 是加入更新隊(duì)列，否則執(zhí)行更新。
知道了React 是使用 isBatchingUpdates 來(lái)判斷是否加入更新隊(duì)列。那么為什么在 setTimeout 事件中 isBatchingUpdates 值為 false ? 原因就是在React中，對(duì)HTML的原生事件做了一次封裝叫做**合成事件。**所以在React自己的生命周期和合成事件中，可以控制 isBatchingUdates 的值，可以根據(jù)值來(lái)判斷是否更新頁(yè)面。而在宿主環(huán)境提供的原生事件中（即非合成事件），無(wú)法將 isBatchingUpdates 的值置為 false，所以就會(huì)立即執(zhí)行更新。
☆所以setState 并不是有同步的場(chǎng)景，而是在特殊的場(chǎng)景下不受React 的控制 **
總結(jié)
setState 并不是單純的同步函數(shù)或者異步函數(shù)，他的同步和異步的表現(xiàn)差異體現(xiàn)在調(diào)用的場(chǎng)景不同。在React 的生命周期和合成事件中他表現(xiàn)為異步函數(shù)。而在DOM的原生事件等非合成事件中表現(xiàn)為同步函數(shù)。
以上就是詳解React setState數(shù)據(jù)更新機(jī)制的詳細(xì)內(nèi)容，更多關(guān)于React setState數(shù)據(jù)更新機(jī)制的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://juejin.cn/post/6953631225437224990
