react哲學：state元資料的不可變性

1. 只允許使用setstate修改資料，
2. 儘量生成新資料而(如果是引用資料，可以進行淺拷貝，然後再賦值)

太懶，索性截個圖:

由上圖看到，一個書籍列表，分別有幾個功能：單個書籍數量的增減，點選操作時會移除一整項，下方會有總價即時更改。

為了不違反react哲學，可以使用高階函式

//數量增減
//封裝數量函式
/*
params  => index: item的index
params  => chages: 變化的值， +1或者-1，由函式觸發時傳入
*/
  changeNum(index, chages) {
    let arrs = [...this.state.arrList]
    arrs.map((item, indez) => {
      if (index === indez) {
        item.num += chages
        return item
      }
      return item
    })
    this.setState({
      arrList: arrs
    })
  }


//移除item
/*
params  => index : item的index
*/ 
    // 點選時獲取index,然後遍歷這個list,filter返回為真的item,將index與indez比較，如果相等才會返回item
    // 規約：如果遍歷時要傳入一個不用但必須要傳的引數時，統一使用` _ `表示
  removeItem(index) {
    this.setState({
      arrList: this.state.arrList.filter((_, indez) => index !== indez)
    })
  }

//求總和 每一項的單價乘以數量
  total() {
    // 回撥函式內第一個引數表示上一次累加的值，reduce第二個引數表示引數0
    return this.state.arrList.reduce((pre, item) => pre + item.price * item.num, 0)
  }

 

以上。