日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

setState 同步更新

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

我們?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 ( 
  
  
  
  
       
  
  
  
  
         
  
  
  
  
          My IP is {this.state.ipAddress || 'Unknown'} 
  
  
  
  
         
  
  
  
  
       
  
  
  
  
    ); 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

傳入狀態(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 
 
  
  
  
  
              Increment 
  
  
  
  
              
{this.state.count}