情景描述

• 經(jīng)常會看到...props
• 無狀態(tài)組件的參數(shù)中
• 或者是在函數(shù)定義的參數(shù)中

坑

• 請不要把只要出現(xiàn)...的地方當(dāng)做同一個操作符
  • 剩余操作符
    • 通常用于函數(shù)定義時的最后一個參數(shù)
    • ...a:a是一個數(shù)組
    • 相當(dāng)于是整和
  • 擴(kuò)展語法
    • 類似于結(jié)構(gòu)賦值
    • 相當(dāng)于是將一個對象或者一個數(shù)組中的每一個元素全部都解構(gòu)出來單獨(dú)使用
    • 相當(dāng)于是解構(gòu)

擴(kuò)展語法

• 用于函數(shù)調(diào)用時的參數(shù)

  const func = (a,b,c) => {
      //*****
  }
  const array = [1,2,3]
  func(...array)
  

  • 當(dāng)做函數(shù)調(diào)用時候的參數(shù)就相當(dāng)于是擴(kuò)展
  • 將每個元素擴(kuò)展開來當(dāng)做函數(shù)的一個參數(shù)
• 用于react傳遞props屬性

  render() {
    const obj = {name:'zp' ,age: 20}
      return (
        <Children {...obj} />
      )
  }
  
  const Children = (props) => {
      console.log(props.name)
      console.log(props.age)
  }
  
  //這樣的好處：如果不使用擴(kuò)展運(yùn)算符render函數(shù)就需要這么寫
  render() {
    const obj = {name:'zp' ,age: 20}
      return (
        <Children 
        name = {obj.name}
        age={obj.age}
        />
      )
  }
  
  //這就相當(dāng)于把對象的名字作為屬性傳給子組件使用
  大大減少代碼數(shù)量
  

• 用于數(shù)組的拼接和排序

  const a = [1,2,3]
  const b = [4,5,6]
  const c = [...b,...a]
  

• 用于reducer，產(chǎn)生新對象(新引用)
  • 對于reducer而言如果返回的對象或者數(shù)組沒有改變引用，他就會認(rèn)為store中的數(shù)據(jù)沒有變化過所以不會觸發(fā)組件重新render（即使可能數(shù)組或?qū)ο笾械哪骋豁棿_實發(fā)生變化）
  • 使用擴(kuò)展運(yùn)算符即使元素沒變（內(nèi)容）也會產(chǎn)生一個全新的對象或者數(shù)組（新引用）一定保證了store可以更新觸發(fā)新的render（可以代替Object.assign存在）

  const initState = {
      name: 'pp',
      age: 20
  }
  const reducer = (action,state) => {
      switch (action.type) {
          case *** : 
            return {...state,{name:'aa'}}
      }
    }
  

  總結(jié)：使用擴(kuò)展運(yùn)算符的對象或者數(shù)組，都是為了將其中的每一個元素可以獨(dú)立的使用

剩余操作符

• 使用場景我見到的好像只有在函數(shù)定義的時候
  • 當(dāng)不確定會返回幾個參數(shù)的時候直接使用...params代替
  • params就會變成一個數(shù)組 收錄傳入的參數(shù)當(dāng)做數(shù)組中的一個元素

  總結(jié)：剩余操作符和擴(kuò)展操作符是一個相反的過程，用來將數(shù)據(jù)整合在一個數(shù)組中