码迷,mamicode.com
首页 > 其他好文 > 详细

由react的todolist想到的

时间:2021-07-06 16:25:11      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:操作   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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!