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