setState 同步更新

我們?cè)谏衔闹刑峒?，為了提高性能React將setState設(shè)置為批次更新，即是異步操作函數(shù)，并不能以順序控制流的方式設(shè)置某些事件，我們也不能依賴(lài)于this.state來(lái)計(jì)算未來(lái)狀態(tài)。典型的譬如我們希望在從服務(wù)端抓取數(shù)據(jù)并且渲染到界面之后，再隱藏加載進(jìn)度條或者外部加載提示：

componentDidMount() { 
    fetch('https://example.com') 
        .then((res) => res.json()) 
        .then( 
            (something) => { 
                this.setState({ something }); 
                StatusBar.setNetworkActivityIndicatorVisible(false); 
            } 
        ); 
} 

因?yàn)閟etState函數(shù)并不會(huì)阻塞等待狀態(tài)更新完畢，因此setNetworkActivityIndicatorVisible有可能先于數(shù)據(jù)渲染完畢就執(zhí)行。我們可以選擇在componentWillUpdate與componentDidUpdate這兩個(gè)生命周期的回調(diào)函數(shù)中執(zhí)行setNetworkActivityIndicatorVisible，但是會(huì)讓代碼變得破碎，可讀性也不好。實(shí)際上在項(xiàng)目開(kāi)發(fā)中我們更頻繁遇見(jiàn)此類(lèi)問(wèn)題的場(chǎng)景是以某個(gè)變量控制元素可見(jiàn)性：

this.setState({showForm : !this.state.showForm}); 

我們預(yù)期的效果是每次事件觸發(fā)后改變表單的可見(jiàn)性，但是在大型應(yīng)用程序中如果事件的觸發(fā)速度快于setState的更新速度，那么我們的值計(jì)算完全就是錯(cuò)的。本節(jié)就是討論兩種方式來(lái)保證setState的同步更新。

完成回調(diào)

setState函數(shù)的第二個(gè)參數(shù)允許傳入回調(diào)函數(shù)，在狀態(tài)更新完畢后進(jìn)行調(diào)用，譬如：

this.setState({ 
     load: !this.state.load, 
     count: this.state.count + 1 
   }, () => { 
     console.log(this.state.count); 
     console.log('加載完成') 
   }); 

這里的回調(diào)函數(shù)用法相信大家很熟悉，就是JavaScript異步編程相關(guān)知識(shí)，我們可以引入Promise來(lái)封裝setState:

setStateAsync(state) { 
    return new Promise((resolve) => { 
      this.setState(state, resolve) 
    }); 
  } 

setStateAsync 返回的是Promise對(duì)象，在調(diào)用時(shí)我們可以使用Async/Await語(yǔ)法來(lái)優(yōu)化代碼風(fēng)格：

async componentDidMount() { 
   StatusBar.setNetworkActivityIndicatorVisible(true) 
   const res = await fetch('https://api.ipify.org?format=json') 
   const {ip} = await res.json() 
   await this.setStateAsync({ipAddress: ip}) 
   StatusBar.setNetworkActivityIndicatorVisible(false) 
 } 

這里我們就可以保證在setState渲染完畢之后調(diào)用外部狀態(tài)欄將網(wǎng)絡(luò)請(qǐng)求狀態(tài)修改為已結(jié)束，整個(gè)組件的完整定義為：

class AwesomeProject extends Component { 
  state = {} 
  setStateAsync(state) { 
    ... 
  } 
  async componentDidMount() { 
   ... 
  } 
  render() { 
    return ( 
      <View style={styles.container}> 
        <Text style={styles.welcome}> 
          My IP is {this.state.ipAddress || 'Unknown'} 
        </Text> 
      </View> 
    ); 
  } 
} 

傳入狀態(tài)計(jì)算函數(shù)

除了使用回調(diào)函數(shù)的方式監(jiān)聽(tīng)狀態(tài)更新結(jié)果之外，React還允許我們傳入某個(gè)狀態(tài)計(jì)算函數(shù)而不是對(duì)象來(lái)作為***個(gè)參數(shù)。狀態(tài)計(jì)算函數(shù)能夠?yàn)槲覀兲峁┛尚刨?lài)的組件的State與Props值，即會(huì)自動(dòng)地將我們的狀態(tài)更新操作添加到隊(duì)列中并等待前面的更新完畢后傳入***的狀態(tài)值：

this.setState(function(prevState, props){  
return {showForm: !prevState.showForm}  
}); 

這里我們以簡(jiǎn)單的計(jì)數(shù)器為例，我們希望用戶(hù)點(diǎn)擊按鈕之后將計(jì)數(shù)值連加兩次，基本的組件為：

class Counter extends React.Component{ 
  constructor(props){ 
    super(props); 
    this.state = {count : 0}  
    this.incrementCount = this.incrementCount.bind(this) 
  } 
  incrementCount(){ 
    ... 
  } 
  render(){ 
    return <div> 
              <button onClick={this.incrementCount}>Increment</button> 
              <div>{this.state.count}</div> 
          </div> 
  } 
} 

直觀的寫(xiě)法我們可以連續(xù)調(diào)用兩次setState函數(shù)，這邊的用法可能看起來(lái)有點(diǎn)怪異，不過(guò)更多的是為了說(shuō)明異步更新帶來(lái)的數(shù)據(jù)不可預(yù)測(cè)問(wèn)題。

incrementCount(){ 
   this.setState({count : this.state.count + 1})  
   this.setState({count : this.state.count + 1}) 
 } 

上述代碼的效果是每次點(diǎn)擊之后計(jì)數(shù)值只會(huì)加1，實(shí)際上第二個(gè)setState并沒(méi)有等待***個(gè)setState執(zhí)行完畢就開(kāi)始執(zhí)行了，因此其依賴(lài)的當(dāng)前計(jì)數(shù)值完全是錯(cuò)的。我們當(dāng)然可以使用上文提及的setStateAsync來(lái)進(jìn)行同步控制，不過(guò)這里我們使用狀態(tài)計(jì)算函數(shù)來(lái)保證同步性：

incrementCount(){ 
  this.setState((prevState, props) => ({ 
     count: prevState.count + 1 
   })); 
  this.setState((prevState, props) => ({ 
     count: prevState.count + 1 
   })); 
 } 

這里的第二個(gè)setState傳入的prevState值就是***個(gè)setState執(zhí)行完畢之后的計(jì)數(shù)值，也順利保證了連續(xù)自增兩次。

【本文是51CTO專(zhuān)欄作者“張梓雄 ”的原創(chuàng)文章，如需轉(zhuǎn)載請(qǐng)通過(guò)51CTO與作者聯(lián)系】

戳這里，看該作者更多好文