React开发-使用抽象+工厂实现状态机

日常开发遇到的一些问题？

• 大量的if else
• 大量的switch case
• 代码阅读性差，扩展性差
• 代码耦合性强，复用率低

痛点

• 以电商平台订单状态的流转为例
  
  从图中可以看到不同的订单状态对应不同的操作按钮，在代码中实现(伪代码)

if (status === '待付款'){
   
    btns = ['取消订单','去付款'];
}else if (status === '待发货'){
   
    ...
}

或者使用switch case

switch (status){
    case '待付款':
        btns = ['取消订单','去付款'];
        break;
    .
    .
    .
}

从上述代码中可以看到，订单状态的一些判断与业务代码掺杂在一块，不利于我们做扩展和复用

思考&实现

• 使用对象来管理不同状态下的UI展示效果
• 比如：在是否需要展示操作按钮的时候

status.canCancel() ? <button  /> ... // 是否需要取消订单的按钮
status.canGoPay() ? <button /> ...  // 是否需要去付款的按钮

• 从上述代码中可以看到，status是代表了不同订单状态的一个对象，我们应该根据后端返回的状态字段创建不同的status对象

// 根据状态创建不同的状态类(伪代码)