由react的todolist想到的

标签：操作   lock   使用   技术   todo   let   src   reduce   元数据   

react哲学：state元数据的不可变性

1. 只允许使用setstate修改数据，
2. 尽量生成新数据而(如果是引用数据，可以进行浅拷贝，然后再赋值)

太懒，索性截个图:

由上图看到，一个书籍列表，分别有几个功能：单个书籍数量的增减，点击操作时会移除一整项，下方会有总价即时更改。

为了不违反react哲学，可以使用高阶函数

规约1：以render函数为界：组件函数放在render前面，功能函数放在render函数后面，

规约2：如果需要使用一个不用但必须要传的参数时，统一使用_表示

//数量增减
//封装数量函数
/*
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函数)
  total() {
    // 回调函数内第一个参数表示上一次累加的值，reduce第二个参数表示初始值累加值，建议0
    return this.state.arrList.reduce((pre, item) => pre + item.price * item.num, 0)
  }
//对显示数据进行格式化
/*
params => price:价格
*/
  format(price) {
    return typeof price === ‘number‘ ? `￥${price}` : price
  }

以上。

由react的todolist想到的

标签：操作   lock   使用   技术   todo   let   src   reduce   元数据   

原文地址：https://www.cnblogs.com/hjk1124/p/14974703.html