MSTForm-Form状态管理

MSTForm-Form状态管理

作者:郑江


随着应用复杂度提升,现在不可避免的就是数据状态管理,现在有很多流行框架,redux、mobx、rxjs等等。不同的解决方案在不同场景下会有明显的优劣势,而我们要做的,就是根据场景来选择合适的方案。

首先,在我们的应用中,我们聚焦到有大量用户输入的表单场景下,我们有以下硬性需求:

  1. 维护用户录入的字段值;
  2. 不同的字段之间有联动关系,修改一个会导致另外一个发生改变;
  3. 不同的字段之间,状态会相互影响,修改一个会导致另外一个不可编辑;
  4. 表单要支持校验;

由这些需求可以看到,在这种场景下,数据驱动方式的 mobx 是最佳的解决方案,我们可以通过 observable data + control component 来实现双向同步的 UI 组件。这样就解决了一个字段同步的问题。

同样,当表单复杂以后,我们更倾向于使用树形结构来管理我们的表单数据。

综上,我们选用了 mobx-state-tree 作为底层框架,来对表单的数据进行管理。

同时,我们使用 MSTForm 对 mobx-state-tree 进行扩展,使得每一个数据节点(叶子节点)都从一个 value,变成了带有 ui 状态的对象。

总结一下,MSTForm 是一个用 树形结构 对表单数据进行管理,并使得每一个数据项(即叶子节点)拥有 ui 状态(disabled、readonly、validator、hasError、errorMessage等等)的解决方案。

select

对于 MSTForm 来说,最重要的 api 就是 select,select 会返回一个 MSTFormField,MSTFormField 是通过代理模式实现的对原叶子节点封装的带有 ui 状态的操作对象。

编程模式的转变

带我们使用 MSTForm 对 表单数据进行封装后,我们会发现,以前针对 ui 层面的操作,现在都会被转化为针对数据状态的操作,即我们提升了数据状态的层级,以更加纯净的方式来书写代码,而数据状态 和 真正 ui 层面的更新,则被封装到了更底层的 Level 中。

从而,我们实现了从 面向UI编程面向数据状态编程 的过度。