RN之回調函數-百步九折縈巖巒

函數可以稱得上是編程語言的靈魂所在之處，它就像是一個個工廠，總能創造出開發者需要的效果。本文就將介紹RN中回調函數的四種寫法。

方法一：使用箭頭函數指向回調。這種寫法就不需要bind函數來綁定。{(newText)this.updateNum=>this.updateNum(newText)}這句代碼的意思是在花括號中有一個箭頭符號定義的函數，它將收到的字符串為參數調用本類組件的updateNum函數，并將該函數的返回值返回。

//構造函數
constructor(props) {
     super(props);
       //狀態機
     this.state = {
         inputedNum: '',
         inputedPW:''
     };
}
//定義一個函數
updateNum(newText) {
   this.setState(state) => {
         return {
               intputedNum:newText,  
         }
   }  
}
//調用  
render() {
   return (
       <TextInput
             onChangeText = {(newText)this.updateNum=>this.updateNum(newText)}/>
 );
}

這裡需要解釋一下綁定。在RN中，綁定操作就是為了讓回調函數能夠正確的解析出this。比如說下面的這段代碼。將updateNum寫成簡寫形式，在return前面加上一條語句console.log(this)。

//構造函數
constructor(props) {
      super(props);
        //狀態機
      this.state = {
          inputedNum: '',
          inputedPW:''
      };
 }
//定義一個函數
updateNum(newText) {
    this.setState(state) => {
      //加上這句會報錯
        console.log(this);
          return {
                intputedNum:newText,  
          }
    }  
}
//調用  用簡寫的方式調用updateNum函數
render() {
     console.log(this);
    return (
        <TextInput
              onChangeText = {this.updateNum}/>
  );
}

如果按照上述方式這樣寫就會報錯，因為當render函數被執行時，this指向本類的一個實例，而當updateNum函數被執行時，this指向了一個對象，它不是該類的實例，因此沒有setState方法，從而產生異常。

方法二：回調函數使用箭頭來定義。這種寫法也不需要bind函數進行綁定。

//可以將函數定義成這樣
updateNum = (newText){
      this.setState((state) => {
         return {
            inputedNum: newText,
    }
});
}
//JSX代碼中就可以寫成如下形式
onChangeText = {this.updateNum}

方法三：在構造函數中進行綁定，後面就可以直接用簡寫的方式調用。

  //構造函數
constructor(props) {
      super(props);
        //狀態機
      this.state = {
          inputedNum: '',
          inputedPW:''
      };
    //注意！！！這裡進行綁定
    this.updateNum = this.updateNum.bind(this);
 }
//定義一個函數
updateNum(newText) {
    this.setState(state) => {
          return {
                intputedNum:newText,  
          }
    }  
}
//調用  用簡寫的方式調用updateNum函數
render() {
    return (
        <TextInput
              onChangeText = {this.updateNum}/>
  );
}

這種方式是簡化了操作，但是千萬要注意，不能寫成下面這個樣子

  //錯誤示範
    onChangeText = {this.updateNum(newText)}

在ES6語法中，this.updateNum是一個使用function關鍵字定義的變量，在這裡function關鍵字被省略了而已。它指向的是我們已經定義好的函數，所以 onChangeText = {this.updateNum}能正確對應寫好的處理函數。而上面這種錯誤示範，在運行的時候會導致結果未知的情況出現。因為newText沒有定義。有函數箭頭時，newText是代表形參，但是上面這張沒有箭頭函數時，newText已經沒有定義了。並且，這條語句代表的是這條語句的一個返回值，而在本例中updateNum函數沒有返回值，那麼它的值就是undefined，將接口與undefined相接明顯是不合適的。在某些程序出現編譯通過但是手機白屏的情況，就可能是因為這種寫法引起的。

方法四：與方法三類似，但是它不用去構造函數中綁定updateNum函數，只要按照下面這種寫法就可以了。

//調用  用簡寫的方式調用updateNum函數
render() {
    return (
        <TextInput
              onChangeText = {this.updateNum.bind(this)}/>
  );
}

這種寫法更為簡單，但是它的缺點是在每次render時，都執行一次bind函數。這有可能降低了RN應用在渲染界面時的性能。