避不開的 setState 問題
本文轉載自微信公眾號「勾勾的前端世界」，作者西嶺 。轉載本文請聯系勾勾的前端世界公眾號。
異步的 setState
“setState 是異步還是同步的?”
這是一個面試中經常會被問到的經典面試題。
在開始講解異步特性之前，我們需要先明確，從 API 層面上說，它就是普通的調用執行的函數 ，自然是同步 API 。因此，這里所說的同步和異步，指的是 API 調用后，state 的改變或者更新 DOM 的時機，是同步還是異步的。
我們先來看一段代碼：
- import React, { Component } from'react'
- exportclass States extends Component {
- state = {
- name:"lisi",
- age:18
- }
- fun= ()=>{
- this.setState({
- name:'xiling'
- })
- console.log(this.state.name)
- }
- render() {
- return (
- <div>
- <h2>State 組件</h2>
- <p>{this.state.name}</p>
- <buttononClick={()=>{this.fun()}}>點我</button>
- </div>
- )
- }
- }
- exportdefault States
代碼實現的的功能非常簡單，就是在點擊按鈕后，修改 state 中的 name 屬性值。事件處理函數中，是在調用 setState 方法之后，又將 state 的值打印到了控制臺。運行代碼你會發現， Dom 中的值發生了改變，但是控制臺卻是之前的結果值。
如果你對異步的運行規則比較熟悉，你一定不會感到奇怪。很顯然，this.setState() 是異步執行的，調用之后，后面的代碼就緊跟著執行了，因此，控制臺打印的結果肯定是修改之前。
因此，我們可以確定，this.setState() 確實是異步調用執行的代碼。
注意，此時，你可以將 this.setState() 當作普通的異步執行代碼(再次強調 JSX 就是 JS)。
那么，如果我想調整代碼獲取異步執行結果，應該怎么做呢?
既然可以看作為普通的異步代碼，想想也知道，其實 this.setState() 方法還提供了第二個參數，我們可以傳入一個回調函數，這個函數就是異步結束后執行的回調函數，具體代碼修改如下：
- fun=async ()=>{
- awaitthis.setState({
- name:'xiling'
- },()=>{
- console.log(this.state.name)
- })
- }
回調函數處理異步結果本來就是傳統的異步編碼方式，但是，我們也知道，異步中的回調函數有一個最大的問題就是 “回調地獄”，那么既然是異步，我們是不是就可以封裝一個 Promise 了呢?
當然可以!
但是，封裝一個 Promise 就顯得有些復雜。最簡單的方式就是借助 ES 2017 中異步調用函數 async/ await 來實現。我們直接修改事件處理函數即可，具體語法規則如下：
- fun=async ()=>{
- awaitthis.setState({
- name:'xiling'
- })
- console.log(this.state.name)
- }
setState 的執行邏輯
在使用 this.setState() 進行狀態更改時，需要進行邏輯處理應該怎么做呢?
其實 this.setState() 的第一個參數是可以接收一個函數處理的。需要注意的是，函數的運行必須返回一個 state 對象，具體代碼如下：
- fun = ()=>{
- this.setState((state)=>{
- // 函數邏輯代碼 ……
- let returnData
- returnData = state.age+1
- // 最終返回一個state 對象
- return {
- age:returnData
- }
- })
- }
也就是說 this.setState() 既可以接收對象參數，也可以接收一個處理函數。
那么，這兩者又有什么區別呢?
在時間處理函數中，我們分別使用兩次 this.setState() 對 state 進行修改操作。
兩次函數執行操作：
- fun = ()=>{
- this.setState((state)=>{
- return {
- age:state.age+2
- }
- })
- this.setState((state)=>{
- return {
- age:state.age+3
- }
- })
- }
運行代碼可以發現，兩次 this.setState() 中的函數都得到了執行，修改了 state 的值。我們再將同樣的代碼邏輯，使用對象數據的方式進行修改操作：
- fun = ()=>{
- this.setState({
- age:this.state.age+2
- })
- this.setState({
- age:this.state.age+3
- })
- }
結果顯示，只有最后一次 this.setState() 得到了執行。
沒錯，this.setState() 如果是函數，那么函數會依次從上往下執行;而如果是一個對象， React 會將多次 this.setState() 的調用合并為一次執行，如果修改了相同的值，則會將前面的修改替換成最后一次的修改數據。
這一點在項目編碼中一定要牢記，避免出現意外的邏輯 Bug。
你可能會問，這到底是什么原理呢?我曾經針對這個問題做過一場專門的技術分享直播，直播的錄屏回放在這里，感興趣可以看看：https://www.bilibili.com/video/BV19P4y1W7hX。
(B站賬號：西嶺老濕)
但是，對于新手來說，我建議你先收藏，因為你現在真的可能看不懂。
當然，你可能也發現了一個問題，我們說了那么多關于組件狀態的問題，各種實驗編碼都是在 class 類組件中完成的，那函數組件中是不是和類組件一樣呢?
嗯~ o(￣▽￣)o……，因為 state 是類組件中的特性，而函數組件中的 state，需要具備 Hook 特性的知識作為鋪墊，所以，暫時我們先留個坑，等著后面來填就行了。
截至到目前，我們已經掌握了組件的概念、組件的傳值、以及組件狀態的相關內容。
