解决什么问题
目前需求大量重复表单，是否可以考虑把它自动化接入？
目前React前端表单解决方案
-
Formik：Formik 是一个流行的 React 表单库，它提供了一个简单但功能强大的 API 来处理表单状态和验证。Formik 支持多种输入控件类型和验证规则，并且可以自定义表单布局和提交行为。
-
React Hook Form：React Hook Form 是另一个流行的 React 表单库，它采用 Hook API 来处理表单状态和验证。React Hook Form 专注于性能和易用性，可以处理大量的表单数据，并提供了一系列方便的工具和组件来构建表单。
-
React-jsonschema-form：React-jsonschema-form 是一个使用 JSON Schema 来生成表单的库，它提供了一个灵活和可定制的表单生成器。React-jsonschema-form 支持多种表单元素类型和验证规则，并且可以自定义表单布局和提交行为
-
阿里巴巴的 Formily是阿里开源的动态化表单的解决方案，优雅的解决了多种复杂场景的表单的数据、状态管理及夸表单通信问题，同时规避了全量全然的弊端，性能优越，生态完备
-
阿里巴巴的 XRender 是一套基于 React.js 框架的，轻量、易用、易上手的中后台「表单 / 表格 / 图表」解决方案
实践
formilyjs
实现步骤（较为麻烦）
-
1.按照formily的要求实现一个uno-ui组件桥接库
-
2.组件库实现一个解析器去把编辑器保存的商品配置解析出来，如果有新的功能，就去新增解析器的解析能力
-
3.编辑器在本地保存数据，实时编辑渲染新搭建的商品
优点
- 功能丰富：提供了非常丰富的功能，包括表单状态管理、表单验证、表单布局、表单联动等。而且 Formily 的功能非常灵活，可以满足各种不同的表单需求。
- 性能优秀：性能非常出色，它采用了一些优化策略来提高表单渲染和处理的效率，例如虚拟滚动、异步渲染、缓存等。
- 扩展性强：提供了非常灵活的扩展接口，开发者可以通过插件、中间件、渲染器等方式来扩展 Formily 的功能。
- 生态完备：生态圈非常完备，包括了大量的插件、工具、组件等，可以满足各种不同的表单需求
缺点
- 不会兼容IE
- 依赖较多，整体体积较大，压缩前130k，压缩后80k，包含桥接组件库
- 学习成本较高，文档不够完善
结论
比较适合用于后台管理平台，c端不适合
XRender
优点：
- 高性能：XRender使用GPU加速技术，能够快速渲染复杂的表单界面，提高表单的渲染效率和用户体验。
- 可扩展性：XRender提供了可扩展的组件和插件机制，支持自定义组件和表单校验规则，方便用户根据具体需求进行扩展和定制。
- 灵活性：XRender提供了丰富的表单控件和布局方式，支持多种数据格式和表单交互方式，具有较高的灵活性。
- 兼容性：XRender兼容性良好，能够支持大多数主流浏览器和操作系统，同时也能够支持移动设备。
缺点：
- 不支持动态数据拉取
- 依赖较多：XRender依赖于许多其他的前端框架和库，如React、Vue、Ant Design等，使用时需要引入相应的依赖和资源。
结论
不支持动态拉取数据，依赖较多和定制和扩展有一定难度等。 优点是不用新建UI桥接库
不推荐
React-jsonschema-form
不支持现有的交互方式，存在bug，如下方链接
总结
优点
- 易于使用：提供了简单易用的API，可以快速生成表单，用户可以通过简单的配置就能够创建出多种复杂的表单。
- 可扩展性：支持自定义组件和UI渲染方式，用户可以方便地根据自己的需求扩展和定制组件和样式。
- 灵活性：支持多种JSON Schema格式，同时也支持多种表单控件，如文本框、下拉框、单选框等，具有较高的灵活性。
- 优秀的可视化效果：的表单控件经过设计和优化，具有优秀的可视化效果，用户能够通过简单的配置和定制，达到良好的用户体验。
缺点
- 不支持所有的JSON Schema格式：React-jsonschema-form虽然支持多种JSON Schema格式，但并不支持所有的JSON Schema格式，因此在使用时需要注意格式的兼容性。
- 社区不活跃，有问题没人修复
结论
不推荐
Formik （React官方推荐的表单解决方案）
总结
优点
优点：
- 简单易用：提供了简洁易懂的API，使得表单处理变得更加容易。
- 具有可扩展性：提供了灵活的插件系统，可以通过插件来扩展其功能，例如使用Yup插件进行表单验证。
- 与React无缝集成：完全基于React，可以与React的生命周期方法和状态管理库（如Redux）无缝集成，方便开发者进行开发。
- 高性能：采用了优化的渲染策略，仅在需要时才更新表单的组件，从而提高了性能。
缺点：
- 表单样式需要自己处理：Formik只提供了表单处理逻辑，不包含任何样式，需要自行添加样式，不过也正好适合自定义ui的情况
结论
推荐
方案对比
| 特点 | React-jsonschema-form | Formik | Formily | XRender |
|---|---|---|---|---|
| 数据来源 | JSON Schema 构建表单 | 手动构建表单 | 可以从 JSON Schema 构建表单 | 可以从 JSON Schema 构建表单 |
| 表单状态管理 | 支持状态管理 | 支持状态管理，需要手动实现校验 | 支持状态管理，自带校验功能 | 支持，自带校验功能，可与 Redux 集成 |
| 组件渲染 | 基于 JSON Schema 渲染表单，组件有限制 | 可以使用任意 React 组件构建表单 | 可以使用任意 React 组件构建表单 | 基于 JSON Schema 渲染表单，可以使用定制组件 |
| 扩展性 | 扩展性相对较弱，需要编写定制组件或修改源码来扩展功能 | 可扩展 | 可扩展 | 可扩展 |
| 社区支持 | 相对较小 | 非常活跃 | 非常活跃 | 相对较小 |
| 学习曲线 | 高 | 相对较低，易上手 | 相对较高，需要学习 Formily 独有的语法 | 相对较高 |
| 生态完备 | 生态圈较小 | 生态圈非常完备 | 生态圈非常完备 | 生态圈相对较小 |
| 开源协议 | MIT | MIT | MIT | MIT |
总结
Formik简单易用，灵活性高，ui可自定义，与React无缝集成，性能较好，社区活跃，生态完善，组件受控，大量使用hooks，于现在的表单不谋而合，适合整体来说比较适合商品的自动生成，可以使用 Formik+Yup+Formik Persist的方式去完成它
-
Yup：一个用于表单验证的库，可以与Formik集成，使表单验证更加简单和可读。
-
Formik Persist：一个用于在本地存储中持久化Formik表单数据的库，可以让表单数据在页面刷新或浏览器关闭后仍然存在。
-
Formik Debug：一个简单的调试工具，可以在控制台中显示Formik表单的状态和值，方便开发人员进行调试和排错。 Formik是一个非常流行的React表单管理库，它有许多相关的生态库和插件，这些库和插件可以扩展Formik的功能并提供更多的工具和实用程序来帮助开发人员更轻松地管理表单数据和状态。
www.jianshu.com/p/fc59cb61f... 。。。。。。
。。。。。
。。。。。
。。。。。。。
完结
。。。。。
。。。。。
。。。。。
。。。。。
