setState 同步更新

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),鷹潭企業(yè)網(wǎng)站建設(shè),鷹潭品牌網(wǎng)站建設(shè),網(wǎng)站定制,鷹潭網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,鷹潭網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

 
 
 
 

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

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

 
 
 
 

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

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

完成回調(diào)

setState函數(shù)的第二個參數(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)知識，我們可以引入Promise來封裝setState:

 
 
 
 

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

setStateAsync 返回的是Promise對象，在調(diào)用時我們可以使用Async/Await語法來優(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ò)請求狀態(tài)修改為已結(jié)束，整個組件的完整定義為：

 
 
 
 

  
  
  
  
class AwesomeProject extends Component { 
  
  
  
  
  state = {} 
  
  
  
  
  setStateAsync(state) { 
  
  
  
  
    ... 
  
  
  
  
  } 
  
  
  
  
  async componentDidMount() { 
  
  
  
  
   ... 
  
  
  
  
  } 
  
  
  
  
  render() { 
  
  
  
  
    return ( 
  
  
  
  
       
  
  
  
  
         
  
  
  
  
          My IP is {this.state.ipAddress || 'Unknown'} 
  
  
  
  
         
  
  
  
  
       
  
  
  
  
    ); 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

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

除了使用回調(diào)函數(shù)的方式監(jiān)聽狀態(tài)更新結(jié)果之外，React還允許我們傳入某個狀態(tài)計算函數(shù)而不是對象來作為***個參數(shù)。狀態(tài)計算函數(shù)能夠為我們提供可信賴的組件的State與Props值，即會自動地將我們的狀態(tài)更新操作添加到隊列中并等待前面的更新完畢后傳入***的狀態(tài)值：

 
 
 
 

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

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

 
 
 
 

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