Formily Demo

按照 formily 官方文档，最小化复现每个示例。本项目不提供线上预览，请直接在本地运行 npm install && npm run start

示例包含 4 个文档：

其中组件采用 @formily/antd-v5 为主文档作演示。不包含 @formily/vue ，技术栈为 React ，在 formily 中两者大同小异

演示分两部分：

所有示例根据自己理解添加了说明、并根据自己的理解补充示例；在文档最后补充两个作业：

主要的使用的包：

启动项目前需要先安装一次依赖： npm install

和官方文档（以下简称“文档”）不同点：

通过 Markup Schema 创建登录：

通过 Json Schema 创建登录

通过 JSX 创建登录：

通过 Markup Schema 创建注册：

通过 Json Schema 创建注册：

通过 JSX 创建注册：

通过 Markup Schema 修改密码

通过 Json Schema 修改密码：

通过 JSX 修改密码

---- 分割线 ----

通过组件 PreviewText.Placeholder 实现预览：

巩固（个人补充）：

无法在 Filed 系列组件中通过 component 或 decorator 包裹的组件均无法受控、也不能使用 useField ，这也包过除此之外的所有 React 组件

---- 分割线 ----

由于查询列表文档只提供了一个概念以及一个参考性的代码，这里按照要求实践：

为了实现这个需求，同时参考了两篇文档：

---- 分割线 ----

演示了几个能力：

个人补充：

修复： 截止于 24.03.18 FormDrawer 中使用 antd v5 的 Dom 结构和 Api 已发生更改，影响包括： FormDrawer.Extra 和 FormDrawer.Footer 无效；可以拷贝这个组件并替换组件路径： https://github.com/cgfeel/formily/blob/main/src/components/drawer/form-drawer/index.tsx

---- 分割线 ----

---- 分割线 ----

截止于 24.03.20， @formily/antd-v5 部分组件 API 已废弃，我将其修复包括有：

如果使用过程中官方仍旧没有修复，请查看对应的文件，拷贝修复

---- 分割线 ----

和文档不同：

---- 分割线 ----

组件修复：

原本是想为 @formily/antd-v5 提交 PR，由于当前 @formily/antd-v5 依赖的是 antd v5.6 导致 API 不兼容，又不能修改工程依赖，所以采用这种方式进行修改

---- 分割线 ----

注1：总结中，所有提到的三种模式分别为： Markup Schema 、 Json Schema 、 Field Jsx ，如果没有单独说明，二种模式为： Markup Schema 、 Json Schema

个人补充案例：

异步数据加载方式：

---- 分割线 ----

几个受控模式：

在这个演示中，包含 4 个 @formily/react 内容： RecursionField 、 useForm 、 useField 、 observer ，分别在演示备注中说明，稍后在具体章节再演示

---- 分割线 ----

主动和被动联动：

FormEffectHooks 内容： FieldEffectHooks 、 setFormState 、 setFieldState 、 SchemaReactions 、 FieldReaction ，稍后在具体章节再演示，也可以启动演示项目查看相关备注

---- 分割线 ----

联动逻辑运算 + 自增表单的一个练习，提供 Markup Schema 和 Json Schema

---- 分割线 ----

文档并没有提到具体内容，这里对前面所有内容归纳总结如下：

---- 分割线 ----

数据解构 (前后端数据差异兼容方案)：

将 name 由普通的字符修改为 [{name},{name}] 这样的方式解构字段

管理业务逻辑： 无案例，总结如下

两种方式：

局部设定有缺点：

全局设定有缺点：

文档建议：

按需打包： 无案例，总结如下

---- 分割线 ----

创建响应对象

在演示中演示了执行过程的顺序

autorun 的执行过程通过微任务来实现

在演示中演示了执行过程的顺序

定义批量操作：在同一个任务事件中拆分成不同的微任务，通过堆栈分别执行

在演示中演示了：

batch 的执行过程通过微任务来实现

和 batch 一样，不同在于：

手动定义领域模型，在文档中有个问题：

快速定义模型，详细见演示

和 autorun 的不同：

observable 不响应有 3 类： React Node 与带有 toJSON 、 toJS 方法的对象

两个特征：

从 observable 对象中获取源数据

将 observable 转化为普通的 JS 对象，转换后的值不能用于依赖收集

函数内包裹的 observable 永远不会被收集依赖

用于检测某段执行逻辑是否存在依赖收集，演示中分别鉴定：

手动跟踪依赖，特征如下：

借此每次跟踪结束后，需要通过 scheduler 来决定后续跟踪

在 React 中，将 Function Component 变成 Reaction

更多往下查看单元测试

---- 分割线 ----

我将使用 formily 将这个库里对应的对象和属性，做成在线工具的形式进行演示，建议本地运行上手操作

创建一个 form 对象，其对象属性可以直接通过本地演示操作查看效果

表单生命周期

生命周期顺序在本地演示说明，更多请本地运行查看：

生命周期顺序在本地演示说明，更多请本地运行查看：

本地使用 formily 开发演示工具，更多请本地运行查看：

本地使用 formily 开发演示工具

更多请本地运行查看：

formily 验证格式、定制信息、定制模板、校验规则、语言等，包含：

更多往下查看单元测试

---- 分割线 ----

详细了解建议：查看本地演示或查看单元测试

本地演示补充：

需要通过单元测试了解：

以下建议通过单元测试、 formily 组件源码了解使用

从 @formily/react 中可以导出 Schema 这个 Class ，但是不希望使用 @formily/react ，可以单独依赖 @formily/json-schema 这个包

更多往下查看单元测试

---- 分割线 ----

内部方法不再当前研究范围，不包含测试用例： array.spec.ts [ 查看 ]

不可收集依赖的批量操作，具体特性见单元测试

action 批量操作普通用法：

define 定义模型中使用 action 批量操作：

定义批量操作，内部可以收集依赖

batch 批量操作普通用法：

define 定义模型中使用 batch 批量操作：

批量操作结束回调， batch 独有 action 没有：

batch.endpoint 不是微任务，而是单纯的回调函数

reaction 中 subscrible 不收集依赖 [ 查看 ]

创建不同响应式行为的 observable 对象：

劫持 Map 类型对象作为 observable 对象：

劫持 Set 类型对象作为 observable 对象

劫持 WeakMap 类型对象作为 observable 对象

劫持 WeakSet 类型对象作为 observable 对象

目录： https://github.com/cgfeel/formily/blob/main/src/__tests__/reactive/observable.spec.ts

array observable 操作

contains 判断 observable 对象中是否包含指定对象

不能直接设置 observable 的 __proto__

手动定义领域模型

model 是快速定义一个模型

define 需要手动定义对象，可以是对象，也可以是一个类，需要手动指定对象属性、方法作为 observable

接收一个 tracker 函数用于响应 observable 数据变化，他们都返回一个 dispose 函数用于停止响应。分别如下：

除此之外在 tracker 函数中会自动收集 observable 依赖，除非：

测试示例：

在依赖发生变化时不会重复执行 tracker 函数，需要用户手动重复执行，只会触发 scheduler

监听 observable 对象的所有操作，支持深度监听也支持浅监听

当收集 observable 对象作为依赖进行响应的时候，修改的值没有变化，那么不会触发响应，这仅限于对象的值是原始类型数据；如果对象的值是引用类型的数据，由于引用的地址发生了改变，即便看上去值是一样的，依旧会触发响应，除非更新的对象也是同一个引用地址的值

详细见单元测试代码

isSupportObservable ：

判断可以作为 observable 对象的类型，可以作为 observable 对象的类型：

不可以作为响应劫持对象的类型：

isObservable ：

判断对象是否为 observable 对象

makeRaw ：

markObservable ：

makeRaw 的权重比 markObservable 高，无论是 makeRaw 包裹 markObservable ，还是 markObservable 包裹 makeRaw 都不能够作为 observable 对象

检测某段执行逻辑是否存在依赖收集

untracker 函数内部永远不会被依赖收集，和 action 一样，不同的是 untracker 不支持批量操作

---- 分割线 ----

内部方法不再当前研究范围，不包含测试用例：

数组字段：

对象字段：

虚拟字段：

调用 createForm 所返回的核心表单模型：

注 ②，在表单字段创建前不能通过 setValue 或 setInitialValue 赋值，但是可以通过表单直接赋值 form.value = {} 或 form.initialValue = {} ，字段创建后不再受到限制

表单、字段生命周期：

备注：无论是表单提交还是表单验证，它们都是微任务

检查对象类型：

自定义 effect ：

字段模型操作方法

---- 分割线 ----

自定义组件内部给 json-schema 表达式传递局部作用域：

createField 的 React 实现：

表单渲染相关：

使用 JsonSchema 渲染：

使用 MarkupSchema 渲染节点：

RecursionField 递归渲染组件：

注 ①： ObjectField 下所有子集都是 properties

---- 分割线 ----

包含有 4 篇文档：

如果是没有接触过 Formily 的新手，建议从上面官方文档示例开始看；对于这几篇文档提到的 Formily 知识点有限，且存在有错误，我会在演示中纠正部分错误；而对于已经了解 Formily ，这几篇文档可以作为补充练习来看

这里我将 4 篇文章比较精彩的部分罗列出来，其他的大多和官方演示一样，可以直接本地运行查看

包含以下章节：

原理直接本地运行查看演示备注，除此之外还可以看看字段和模型的实践

---- 分割线 ----

原文章：手把手教你写一个条件组合组件 [ 查看 ]，将其用 Formily 复现

目录： https://github.com/cgfeel/formily/tree/main/src/components/objectBase

---- 分割线 ----

在刷 Formily 的时候时常会有个疑问， Formily 的优势是什么，对比诸如： react-hook-form 、 zod ，亦或者直接使用 Antd ，我有什么非用 Formily 不可的地方吗？在刷完整个文档后我大致总结出这么几条：

几乎市面上所有的表单验证库也好，还是相关的库也好，它们都是围绕：验证、受控展开，但是很少会提到：模型渲染、数据分离，这应该就是 Formily 特有的地方了，它不仅仅是一个表单验证、受控的库。借助模型处理的能力，可以无限拓展、分离、组合不同的 schema ，实现、管理一个极其庞大的数据。

当然带来的问题就是学习成本的上升，要了解 Formily ，就要了解一套状态管理 Reactive 、了解副作用及声明周期和相关对象 Core 、了解一套现有的渲染引擎库 React ，以及对应的一套主题，如： Antd

那什么时候选择使用 Formily 呢？