小程序页面开发中的状态管理

问题背景：

完成小程序订单详情界面的时候，要根据订单的状态以及订单的类型进行页面的区分。

完成方案一：

inStoreService=(status)=>{
    switch (status) {
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_PAY:
        return this.inStoreServiceWaitPay();
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_USE:
        return this.inStoreServiceWaitUse();
    }
  }
  doorToDoorService=(status)=>{
    switch (status) {
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_PAY:
        return this.doorToDoorServiceWaitPay();
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_USE:
        return this.doorToDoorServiceWaitUse();
    }
  }

  renderServeContent=(addressType,status)=>{
    switch (addressType) {
      case ORDER_ADDRESS_TYPE.IN_STORE_SERVICE:
        return this.inStoreService(status);
      case ORDER_ADDRESS_TYPE.DOOR_TO_DOOR_SERVICE:
        return this.doorToDoorService(status);
    }
  }

首先根据订单的类型区分为上门服务和到店服务

renderServeContent=(addressType,status)=>{
    switch (addressType) {
      case ORDER_ADDRESS_TYPE.IN_STORE_SERVICE:
        return this.inStoreService(status);
      case ORDER_ADDRESS_TYPE.DOOR_TO_DOOR_SERVICE:
        return this.doorToDoorService(status);
    }
  }

再根据订单状态进行进一步区分

inStoreService=(status)=>{
    switch (status) {
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_PAY:
        return this.inStoreServiceWaitPay();
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_USE:
        return this.inStoreServiceWaitUse();
    }
  }
  doorToDoorService=(status)=>{
    switch (status) {
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_PAY:
        return this.doorToDoorServiceWaitPay();
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_USE:
        return this.doorToDoorServiceWaitUse();
    }
  }

再渲染出对应的部分

  inStoreServiceFinished=()=>{
    const{items={}} = this.props;
    const {productQuantity,//数量
      productName,//名字
      productPic,//图片
      productPrice,//价格
    }=items;
    return(
      <View>
        <View className='serveContent_Item'>
          <View className='serveContent_Item_A'><Image src={productPic} className='img_card' /></View>
          <View className='serveContent_Item_B'>
            <View className='serveContent_Item_B_1'>{this.sliceString(productName)}</View>
            <View className='serveContent_Item_B_2'>数量{productQuantity}</View>
            <View style={{display:'flex'}}>
              <View className='serveContent_Item_B_3'>
                ￥{productPrice}
              </View>

            </View>
          </View>
        </View>

        <View className='order-card-footer-btns'>
          <View className='btn-one-more-order'>
            再来一单
          </View>
        </View>

      </View>
    )
  }

这样分步进行状态管理的坏处就是当新增了一个状态之后，需要修改多个函数，并且随着时间的推移，维护代码会变得更加困难。

完成方案二：

使用复合状态将两个状态封装起来，这样新增状态之后，只用改两个函数的代码就可以新增一个状态，维护起来更加清晰

parseServiceOrderStatus = (addressType,status) => {
    let compositeStatus = 0;
    switch (addressType){
      case ORDER_ADDRESS_TYPE.IN_STORE_SERVICE:
        switch (status){
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_PAY:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_PAY_IN_STORE_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_USE:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_USE_IN_STORE_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_UNDER_SERVICE:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_UNDER_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_FINISHED:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_FINISHED_IN_STORE_SERVICE;
            break;
        }
        break;
      case ORDER_ADDRESS_TYPE.DOOR_TO_DOOR_SERVICE:
        switch (status){
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_PAY:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_PAY_DOOR_TO_DOOR_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_USE:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_USE_DOOR_TO_DOOR_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_UNDER_SERVICE:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_UNDER_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_FINISHED:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_FINISHED_DOOR_TO_DOOR_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_AFTER_SALE:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_AFTER_SALE_DOOR_TO_DOOR_SERVICE;
            break;
        }
        break;
    }
    return compositeStatus;
  }

...

renderByCompositeStatus = (compositeStatus) => {
    console.log("compositeStatus",compositeStatus);
    switch (compositeStatus) {
      case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_PAY_DOOR_TO_DOOR_SERVICE://上门服务 待付款
        return this.doorToDoorServiceWaitPay();
      case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_PAY_IN_STORE_SERVICE://到店服务 待付款
        return this.inStoreServiceWaitPay();
      case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_USE_DOOR_TO_DOOR_SERVICE://上门服务 待使用
        return this.doorToDoorServiceWaitUse();
      case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_USE_IN_STORE_SERVICE://到店服务 待使用
        return this.inStoreServiceWaitUse();
      case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_UNDER_SERVICE://上门服务 服务中
        return this.underService();
      case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_FINISHED_DOOR_TO_DOOR_SERVICE://上门服务 已完成
        return this.doorToDoorServiceFinished();
      case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_FINISHED_IN_STORE_SERVICE://到店服务 已完成
        return this.inStoreServiceFinished();
      case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_AFTER_SALE_DOOR_TO_DOOR_SERVICE://上门服务 售后
        return this.doorToDoorServiceAfterSale();
      case -1:
        return null;
    }
  }

// 对应的复合状态
const SERVICE_ORDER_COMPOSITE_STATUS = {
  SERVICE_ORDER_WAIT_PAY_DOOR_TO_DOOR_SERVICE: 0,//订单状态为待使用，服务类型为上门服务
  SERVICE_ORDER_WAIT_PAY_IN_STORE_SERVICE: 1,//订单状态为待使用，服务类型为到店服务
  SERVICE_ORDER_WAIT_USE_DOOR_TO_DOOR_SERVICE: 2,//订单状态为待使用，服务类型为上门服务
  SERVICE_ORDER_WAIT_USE_IN_STORE_SERVICE: 3,//订单状态为待使用，服务类型为到店服务
  SERVICE_ORDER_UNDER_SERVICE: 4,//订单状态为服务中
  SERVICE_ORDER_FINISHED_IN_STORE_SERVICE:5,//订单状态为已完成，服务类型为上门服务
  SERVICE_ORDER_FINISHED_DOOR_TO_DOOR_SERVICE:6,//订单状态为已完成，服务类型为到店服务
  SERVICE_ORDER_AFTER_SALE_DOOR_TO_DOOR_SERVICE:7,//订单状态为售后，服务类型为上门服务
}

结语

这种封装状态，再根据不同的状态定义不同的行为的设计模式是状态模式，具体的可以看看菜鸟教程里的介绍或者其他大佬的博客。

这种设计模式简单来说，优点是利于扩展以及减少大量的条件语句，但缺点就是每次新增状态又要重新维护一遍代码。当状态过多时要慎用状态模式
状态模式 | 菜鸟教程 (runoob.com)