Immer

概述这篇文章大致梳理积梦采用的表单方案做的一些尝试和回顾.目前从用的方案是 Meson Form, 名字大致来源于 immer json:https://github.com/jimengio/m...目前 Meson Form 形态逐渐开始稳定了, 方案上基本还是可靠的.过程当中的考虑有一些曲折, 大致做一些梳理. KForm早先我们的方案当中其实沿用了一套书写较为简便的方案, 称为 KForm.看过 Meson Form 例子的话, 跟 KForm 的写法已经比较相似了,主要看 items, 每个元素定义了表单当中的一项, 这个表单有 3 项: let { dataSource, onSubmitData, formRef } = this.props;let items: IFormItem[] = [ { id: "name", label: lang.lblName, rules: [{ required: true }] }, { id: "code", label: lang.lblSerialNumber, rules: [{ required: true }] }, { id: "description", label: lang.lblDescription },];return <KForm ref={formRef} items={items} data={dataSource} layout={layout} onSubmitData={onSubmitData} />;粗看这个例子, 可能觉得已经是比较成熟的表单方案了.不过深入使用的话, KForm 存在两个问题, ...

积梦(https://jimeng.io) 是一个为制造业制作的一个平台.积梦的前端基于 React 做开发的. Rex 是我们在前端使用的状态管理方案, 类似 Redux.从名字也可以看, Rex 是一个基于 Redux 做了大幅简化的方案.另一方面, Rex 跟 Immer 有比较好的整合, 能够很轻松得使用不可变数据. 先前的技术方案在开发 Rex 之前, 我们主要采用了 mobx-state-tree 的方案, 以及试验过 Redux.最早的代码使用了 mobx 搭配 mobx-state-tree, 比较迎合 observe 的用法.但是使用 mobx 全家桶遇到了一些比较困扰的问题, mobx 对数据封装的话,数据量比较大的时候初始化非常慢, 对应图表.observable 数据调试很不方便, 打印在 Console 是一个难以读取的对象.mobx-state-tree 内置了 types, 加上偶尔有改版, 经常出现不可控, 比如报错, 字段修改.由于我一直就是 immutable 数据的支持者, 就一直在试验能否用不可变数据解决这些问题.但是早先主要是 immutablejs 方案, 按照以前的使用经验, 成本比较高.后来出现了 immer, 在工业聚当有 Micheal 的介绍下我们开始局部尝试, 取得了不错的效果.而且因为 immer 也是 mobx 全家桶作者 Micheal 发布的模块, 使用也比较顺畅. 最初我尝试过用 immer 搭配 Redux 来局部替换一些全局状态,试验之后我觉得效果上没有达到预期, ...