Form 表单低代码 - @formily/* 组件库 - 《React技术栈⚛️》

@formily/core
@formily/antd
@formily/react
@formily/reactive-react
@formily/shared
@formily/reactive
@formily/validator
@formily/grid
@formily/json-schema
@formily/path

@formily版本 @2.2.16�

@formily/antd 桥接 antd，View层
1. 基于 antd 封装的针对表单场景的 formily2x组件库，不兼容 formily1x
2. “antd”: “<=4.22.8”
@formily/core 核心库，ViewModel层
@formily/react ，桥接 react，Model层
@formily/grid
@formily/json-schema
@formily/path
@formily/reactive
@formily/reactive-react
@formily/shared
@formily/validator

Formily 分为了内核层，UI 桥接层，扩展组件层，和配置应用层
@formily/react 就是将 ViewModel 和 View 绑定起来的胶水层
@formily/core 就是 ViewModel，
Component 和 Decorator 就是 View
ViewModel 和 View 的绑定就叫做模型绑定，实现模型绑定的手段主要有useField，也能使用connect和mapProps

https://antd-mobile.formilyjs.org/zh-CN

yarn add antd-mobile moment
yarn add @formily/core @formily/react @formily/antd-mobile

https://github.com/lulongwen/designable-antd

@formily/reactive
响应式状态管理方案；依赖追踪，高效更新，按需渲染
https://reactive.formilyjs.org/zh-CN/guide

参考 Mobx，基于 Proxy 劫持来实现的响应式编程模型
Observable，创建一个可订阅对象
Reaction，订阅者，接收一个 tracker 函数
Computed，缓存计算结果的 Reaction
Batch，将更新进行合并

@formily/core
将领域模型从 UI 框架中抽离出来，UI无关
https://core.formilyjs.org/zh-CN/guide

响应式计算能力
校验能力、校验国际化能力
值管理能力
联动管理能力

@formily/react
提供了一系列的组件和 Hooks
https://react.formilyjs.org/zh-CN/guide/concept

基于标准 JSON Schema 来进行驱动渲染的，协议驱动渲染
在标准之上又扩展了一些 x-*属性来表达 UI
Schema
递归渲染
协议绑定

SchemaField 子节点不能随意插 UI 元素，因为 SchemaField 只会解析子节点的所有 Schema 描述标签，
然后转换成 JSON Schema，最终交给RecursionField渲染，
如果想要插入 UI 元素，可以在 VoidField 上传x-content属性来插入 UI 元素

三种开发模式
JSX 开发模式，用 Field/ArrayField/ObjectField/VoidField 组件
JSON Schema 开发模式，SchemaField 的 schema 属性传递 JSON Schema 即可
Markup Schema 开发模式， Schema 开发模式，同样是使用 SchemaField 组件

JSON Schema 在 JSX 环境下很难得到最好的智能提示体验，也不方便维护
JSX 标签的形式可维护性会更好，智能提示也很强。

第三方组件库的无侵入接入 Formily

Formily DevTools
https://chrome.google.com/webstore/detail/formily-devtools/kkocalmbfnplecdmbadaapgapdioecfm/related?hl=zh-CN

@formily/core

formily核心库，用来操控整个表单、字段数据 https://core.formilyjs.org/zh-CN/guide
负责管理表单的状态，表单校验，联动等
将领域模型从 UI 框架中抽离出来，提升代码可维护性
74个方法，

[
  "createEffectContext",
  "createEffectHook",
  "createForm",
  "FormPath",
  "getValidateLocaleIOSCode",
  "isArrayField",
  "isArrayFieldState",
  "isDataField",
  "isDataFieldState",
  "isField",
  "isFieldState",
  "isForm",
  "isFormState",
  "isGeneralField",
  "isGeneralFieldState",
  "isObjectField",
  "isObjectFieldState",
  "isQuery",
  "isVoidField",
  "isVoidFieldState",
  "LifeCycleTypes",
  "onFieldChange",
  "onFieldInit",
  "onFieldInitialValueChange",
  "onFieldInputValueChange",
  "onFieldLoading",
  "onFieldMount",
  "onFieldReact",
  "onFieldReset",
  "onFieldSubmit",
  "onFieldSubmitEnd",
  "onFieldSubmitFailed",
  "onFieldSubmitStart",
  "onFieldSubmitSuccess",
  "onFieldSubmitValidateEnd",
  "onFieldSubmitValidateFailed",
  "onFieldSubmitValidateStart",
  "onFieldSubmitValidateSuccess",
  "onFieldUnmount",
  "onFieldValidateEnd",
  "onFieldValidateFailed",
  "onFieldValidateStart",
  "onFieldValidateSuccess",
  "onFieldValidating",
  "onFieldValueChange",
  "onFormGraphChange",
  "onFormInit",
  "onFormInitialValuesChange",
  "onFormInputChange",
  "onFormLoading",
  "onFormMount",
  "onFormReact",
  "onFormReset",
  "onFormSubmit",
  "onFormSubmitEnd",
  "onFormSubmitFailed",
  "onFormSubmitStart",
  "onFormSubmitSuccess",
  "onFormSubmitValidateEnd",
  "onFormSubmitValidateFailed",
  "onFormSubmitValidateStart",
  "onFormSubmitValidateSuccess",
  "onFormUnmount",
  "onFormValidateEnd",
  "onFormValidateFailed",
  "onFormValidateStart",
  "onFormValidateSuccess",
  "onFormValuesChange",
  "registerValidateFormats",
  "registerValidateLocale",
  "registerValidateMessageTemplateEngine",
  "registerValidateRules",
  "setValidateLanguage",
  "useEffectForm"
]

import { createForm } from '@formily/core';
import { Schema } from '@formily/json-schema';
// 注册字段
Schema.registerPatches(schema => {
  const permission = schema['x-permission'];
  if (permission) { // 这里做一些处理
    schema['x-display'] = 'none';
  }
  return schema;
});
function App() {
  const form = createForm({
    validateFirst: true, // 只显示第一个错误
    initialValues: {}, // 初始值
    effects() {
      // 事件处理
    },
  })
  return (
    <Form form={form} layout="vertical">
      <Field 
        name="test" 
        title="测试" 
        component={[Input, { placeholder: '请输入' }]} 
        decorator={[FormItem]}
      />
      // 监听一个字段的变化，但是这个字段并没有出现在UI
      <Field name="xx" hidden />
    </Form>
  )
}

@formily/antd

46个方法，只支持 Formily2.x https://antd.formilyjs.org/zh-CN/components
按照formily要求所封装的UI组件库，针对表单场景的 formily2x组件库，不兼容 formily1x

formily不能直接消费UI组件库，例如 antd
需要按照 formily的格式所封装，属于 antd的 UI桥接库

connect链接了 antd组件库，区别

你用 antd 组件库，需要自己去绑定事件和值，value & onChange受控，然后调用 @formily/core 的 API 收集表单值，做校验；

@formily/antd 做一层封装，connect了 antd组件，你就可以实现值改变自动更新的效果

[
"ArrayBase",
"ArrayCards",
"ArrayCollapse",
"ArrayItems",
"ArrayTable",
"ArrayTabs",
"BaseItem",
"Cascader",
"Checkbox",
"createFormGrid",
"DatePicker",
"Editable",
"Form",
"FormButtonGroup",
"FormCollapse",
"FormDialog",
"FormDrawer",
"FormGrid",
"FormItem",
"FormLayout",
"FormLayoutDeepContext",
"FormLayoutShallowContext",
"FormStep",
"FormTab",
"GridColumn",
"Input",
"NumberPicker",
"Password",
"PreviewText",
"Radio",
"Reset",
"Select",
"SelectTable",
"Space",
"Submit",
"Switch",
"TimePicker",
"Transfer",
"TreeSelect",
"Upload",
"useFormDeepLayout",
"useFormGrid",
"useFormLayout",
"useFormShallowLayout",
"useGridColumn",
"useGridSpan"
]

@formily/react

UI桥接库，react的项目必须安装，提供了绑定 Form的相关 Field字段
31个方法

[
  "ArrayField",
  "connect",
  "ContextCleaner",
  "createSchemaField",
  "ExpressionScope",
  "Field",
  "FieldContext",
  "FormConsumer",
  "FormContext",
  "FormProvider",
  "mapProps",
  "mapReadPretty",
  "ObjectField",
  "observer",
  "Observer",
  "RecordScope",
  "RecordsScope",
  "RecursionField",
  "Schema",
  "SchemaComponentsContext",
  "SchemaContext",
  "SchemaExpressionScopeContext",
  "SchemaMarkupContext",
  "SchemaOptionsContext",
  "useExpressionScope",
  "useField",
  "useFieldSchema",
  "useForm",
  "useFormEffects",
  "useParentForm",
  "VoidField"
]

@formily/reactive-react

8个方法

[
  "observer",
  "Observer",
  "unstable_useCompatEffect",
  "unstable_useCompatFactory",
  "unstable_useDidUpdate",
  "unstable_useForceUpdate",
  "unstable_useLayoutEffect",
  "unstable_useObserver"
]

@formily/shared

47个方法

[
  "applyMiddleware",
  "camelCase",
  "clone",
  "defaults",
  "deprecate",
  "each",
  "every",
  "find",
  "findIndex",
  "FormPath",
  "getType",
  "globalThisPolyfill",
  "includes",
  "instOf",
  "isArr",
  "isBool",
  "isEmpty",
  "isEqual",
  "isFn",
  "isHTMLElement",
  "isMap",
  "isNum",
  "isNumberLike",
  "isObj",
  "isPlainObj",
  "isReactElement",
  "isRegExp",
  "isSet",
  "isStr",
  "isUndef",
  "isValid",
  "isWeakMap",
  "isWeakSet",
  "lazyMerge",
  "lowerCase",
  "map",
  "merge",
  "paramCase",
  "pascalCase",
  "reduce",
  "shallowClone",
  "some",
  "stringLength",
  "Subscribable",
  "toArr",
  "uid",
  "upperCase"
]

@formily/reactive

24个方法
响应式编程，事件订阅与派发机制，formily自己实现了一套完整的拖拽引擎

一个类 MobX 的 Reactive 方案作为全局状态管理，所有数据的变更都是可预测
借助 @formily/reactive 去订阅内核的数据变更

Formily 内核还将各类表单问题抽象为若干个领域对象，如路径系统、生命周期、响应器等

[
"action",
"autorun",
"batch",
"buildDataTree",
"contains",
"DataChange",
"DataNode",
"define",
"getDataNode",
"hasCollected",
"isAnnotation",
"isObservable",
"isSupportObservable",
"markObservable",
"markRaw",
"model",
"observable",
"observe",
"raw",
"reaction",
"setDataNode",
"toJS",
"Tracker",
"untracked"
]

@formily/validator

18个方法

[
  "getLocaleByPath",
  "getValidateFormats",
  "getValidateLanguage",
  "getValidateLocale",
  "getValidateLocaleIOSCode",
  "getValidateMessageTemplateEngine",
  "getValidateRules",
  "isValidateResult",
  "parseValidator",
  "parseValidatorDescription",
  "parseValidatorDescriptions",
  "parseValidatorRules",
  "registerValidateFormats",
  "registerValidateLocale",
  "registerValidateMessageTemplateEngine",
  "registerValidateRules",
  "setValidateLanguage",
  "validate"
]

@formily/grid

["Grid"]

@formily/json-schema

通过虚拟 TreeNode 节点进行操作，最终再转换生成为 Formily JSON Schema

["Schema"]

@formily/path

["Path"]