React 箭頭函數的使用

在使用 React 的開發過程中，經常會用到箭頭函數，箭頭函數形式簡潔，並且可以方便地進行函數綁定和參數傳遞

在 JavaScript 中函數不指定參數的類型，不檢查實參的類型，不檢查形參的個數：具體點擊這里

 

import React from 'react';

class ComponentB extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    return(
      <div>{this.props.addInB(111,555)}{/*函數調用*/}</div>
    )
  }
}

export default class ComponentA extends React.Component{
  addInA(a,b){
    return a+b;
  }

  subInA(a,b){
    return a-b;
  }

  mulInA(a,b){
    return a*b;
  }

  divInA(a,b){
    return a/b;
  }

  render(){
    return(
      <div>
        {/* JS 中函數不指定參數的類型，不檢查實參的類型，不檢查形參的個數 */}

        {/* 綁定的時候 */}
        <div>
          {(a,b)=>this.subInA(a,b)}{/*通過箭頭函數實現對 this 的綁定，但是不檢查形參的個數*/} 
          {this.subInA(100,90)}{/*函數調用 輸出：10 */}
        </div>

        <div>
          {()=>this.mulInA()}{/*通過箭頭函數實現對 this 的綁定，但是不檢查形參的個數*/} 
          {this.mulInA(3,6)}{/*函數調用 輸出：18 */}
        </div>

        <div>
          {(x,y,z)=>this.divInA(x,y,z,a,b,c)}{/*通過箭頭函數實現對 this 的綁定，但是不檢查形參的個數*/}
          {this.divInA(96,4)}{/*函數調用 輸出：24 */}
        </div>


        {/* 賦值傳遞的時候 */}
        <ComponentB addInB={(x,y)=>this.addInA(x,y)}/>
        {/* 
          通過箭頭函數實現對 this 的綁定，但是不檢查形參的個數，輸入：(111,555)，輸出 666
          但是：
          function addInB(x,y){ // addInB 的參數在調用 addInB 函數時候傳入
            this.addInA(x,y); // addInA 的參數在 addInB 中獲取
          }
         */}

        <ComponentB addInB={()=>this.addInA()}/>
          {/* 
          通過箭頭函數實現對 this 的綁定，但是不檢查形參的個數，輸入：(111,555)，輸出 NaN
          但是：
          function addInB(){ // addInB 的參數在調用 addInB 函數時候傳入
            this.addInA(); // addInA 的參數無法獲取 ，因為此處 addInA 沒有參數傳入
          }
         */}

         <ComponentB addInB={()=>this.addInA(1234,5678)}/>
          {/* 
          通過箭頭函數實現對 this 的綁定，但是不檢查形參的個數，輸入：(111,555)，輸出 6912
          但是：
          function addInB(){ // addInB 的參數在調用 addInB 函數時候傳入
            this.addInA(1234,5678); // addInA 的參數，此處直接傳入 1234 和 5678
          }
         */}

      </div>
    )
  }
}