研发协同利器：XState调研与应用

背景

帖子详情是一个图文/视频混排、拥有大量长文本、大量交互和部分细节动效的页面，细节组件非常多，页面复杂度高。按以往的页面协作方式，会将一个个组件样式、组件数据和组件交互逻辑交给对应的开发同学完成，通过多人协同最终搭建出完整的页面，但这样的方式会造成后期维护该页面的一到两个核心同学成本急剧增加，需要理解每个组件内的逻辑代码；于是为了改善页面内的协作效率，同时为开发上下游协同效率提升打好基础，通过大量案例/源码/文献调研，最后选择使用开源的XState方案来完成页面协同开发。

XState的理论基础

在使用XState前，我们一直在探索的方向是当下有没有一种适合降低研发上下游协同成本的代码即流程的理论模型或者方案，经过大量调研，最终找到了在致力促进团队间沟通提升生产力的基于可执行UML研究分支的W3C SCXML标准协议，在该协议的基础上，我们可以标准化的方式将业务逻辑进行图形化的表达。随着调研的深入，最终选择了具有成熟工具配套的基于JS语言的解决方案XState。

在该方案下核心会使用到三种工具，第一种是用于创建状态机的xstate库和其在主流UI框架下的适配库；第二种是可视化的编辑器插件，基于该插件我们可以快速产出图形化的业务逻辑，同时拥有一份等价的状态配置代码；第三种是状态机实例的可视化展示，闲鱼基于该工具之上的定制可以试试观测与模拟正在运行的页面内状态机。

xstate库基础概念与使用方式

StateNodeConfig介绍

首先基于xstate库，我们了解下其核心概念。当我们定义状态机时，会使用到createMachine方法（如图2-1），该方法接收StateNodeConfig实例(如图2-2，在不同入参时可以参看不同的StateNodeConfig子类型)，并生成StateNode实例。

图2-1

图2-2

StateNodeConfig的属性是初学者需要核心关注的内容，以社区详情的互动点赞能力简化版为例子，我们首先需要和业务一起定义点赞会有几种状态，然后定义在用户的交互事件中如何响应，如下所示，我们定义了四种状态"未点赞"，"点赞中"，"已点赞"，"取消点赞中"，并且声明，如果处于"已点赞"状态下用户进行了点赞按钮的点击，那么我们就会进入"取消点赞中"的状态，在"取消点赞中"我们会调用服务端取消点赞接口，当请求完成后，我们就进入了"未点赞"状态。当然，这个逻辑是需要和业务方一起定制的，例如有的场景下希望取消点赞后立刻成为"未点赞"状态，而取消点赞请求可以延后调用，那么就可以进行对应的状态调整。

states: {
  like: {
    on: {
      CLICK_LIKE: {
      actions: (ctx, e)=> console.log('you clicked to undolike'),
        target: 'undoliking'
        }
    }
  },
  undolike: {
  },
  liking: {},
    undoliking: {
    invoke: 'requestToUndoLike',
    onDone: {
      target: 'undolike'
    }
  }
}

Node属性介