React项目中使用各表单库性能对比调研报告

1. 引言

在pc端尤其后台系统中，表单始终是重要角色。它是用户输入和数据收集的功能，无论是登录流程、注册页面还是复杂的数据录入系统。随着React成为前端中最受欢迎的库之一，涌现出多种解决方案来简化表单的处理。Formik、Formily、ReactHookForm和Ant Design Form是目前最受开发者欢迎的表单库，每个都有其独特之处和优势。

在处理含有大量字段的复杂表单时，性能是一个最为重要的因素。性能差异会影响到表单的响应速度、用户体验乃至整个应用的稳定性。因此，本报告的目的是通过测试和对比分析，探究如下四个表单库在处理大规模表单场景时的性能表现。

主要对以下四个库进行调研：

库名	简介	npm周下载量（2024.1.31-2024.2.6)	github数据 （截至2024.2.6)
Formik	以其直观的API和易于上手的特性，在React社区中获得了广泛的认可和使用	2564158	issue:688 fork:2.8k star:33.3k
Formily	由阿里巴巴团队开发，专注于复杂表单场景，强调性能和灵活性。	8374	issue:38 fork: 1.5k star: 10.5k
ReactHookForm	利用React Hooks提供的能力，提供了一个高性能的表单解决方案，以最小的重渲染次数和直观的API著称。	4703534	issue:38 fork: 2k star: 38.8k
Antd-Form	Ant Design组件库中的组件，这个表单库提供了与UI组件高度集成的表单管理能力，同时保持了良好开发体验与其他组件ui的一致性	1351609（antd数据）	issue: 1.1k fork: 44.5k star: 89.3k

接下来，我们将首先概述每个库的主要特点和部分设计原理。我们还将详细阐述在测试demo中收集到的相关数据，并进行分析展示。最终，希望能为大家提供一些建议，以便根据自身项目需求选择最佳实践，并为在不同场景下选择合适的表单库提供指导。

2. 表单库选择

库名	库的概述	选择理由	适合场景	上手难易程度
Formik	1.Formik是一个广泛使用的React表单库，它提供了一个简单而强大的解决方案，用于构建表单。 2.API和丰富的特性集使得开发者可以快速实现复杂的表单处理逻辑。 3.Formik支持表单验证、表单提交、表单状态管理等核心功能。 4.提供了高阶组件和Hooks来优化React组件的重用。	以其易用性和灵活性著称。	最适合需要快速开发和部署的中小型项目，以及对开发者友好性和灵活性有较高要求的应用。	它提供了直观的API和详细的文档，使得新手容易理解和开始使用。适合需要快速实现表单功能的场景。
Formily	1.专门为复杂和动态表单场景设计。 2.它的核心优势在于其表单模型，该模型能够处理大量数据和复杂的表单关系。 3.Formily不仅强调性能，还提供了一系列的React组件和Hooks，使得开发者可以构建出高度可定制和可扩展的表单。	在处理复杂表单时表现出色。	特别适合那些需要构建复杂、高度动态和数据驱动的表单的大型企业应用。	由于它设计用来处理更复杂的表单逻辑，Formily的上手难度可能会稍高一些。不过，对于那些需要高度定制表单行为和动态表单字段的开发者来说，投入时间学习Formily将会非常值得。
ReactHookForm	1.一个以性能为中心的表单库，它利用了React的Hooks API。 2.库的设计目标是减少组件的重渲染次数，从而提高性能。它通过使用非受控组件和原生的HTML输入元素来减少不必要的重渲染. 3.提供了简单的表单验证方法。	以高性能和低重渲染次数为卖点。	适用于追求性能优化的项目，尤其是在移动设备上需要尽可能减少重渲染的应用。	它利用了React的Hooks模式，对于熟悉现代React开发模式的开发者来说非常容易上手。React Hook Form的API设计注重简洁，减少了不必要的复杂性。
Antd-Form	1.Ant Design组件库的一部分，它提供了一套企业级的UI组件来构建React应用。 2.与其他Ant Design组件紧密集成，提供了丰富的表单控件和布局选项。 3.支持表单验证、动态表单项、自定义表单控件等功能，并且与Ant Design的设计语言保持一致，保证了UI的一致性和专业性。	提供了与UI组件的高度集成和企业级的设计。	适合那些需要与Ant Design UI组件库无缝集成，追求一致的设计语言和用户体验的企业级应用。	作为Ant Design生态系统的一部分，AntdForm对于已经在使用Ant Design组件库的开发者来说非常容易集成和上手。它的文档和示例与Ant Design的其他组件紧密结合，提供了一致的开发体验。

3. 测试方法

测试环境	性能指标	测试场景	数据收集方式
浏览器版本：121.0.6167.160（正式版本） React版本：^18.2.0 脚手架：create-react-app node版本：^18.14.0	初始渲染时间 更新时间 交互响应时间 内存使用	表单项数量100 是否有复杂的验证逻辑 是否有动态表单项	使用React的Profiler API 浏览器的performance

4. 数据收集

库名	初始渲染时间	表单验证时间	表单项更新时间	表单项交互时间	内存使用情况
Formik	300-600ms	简单表单（几个字段，简单的同步验证）：约1-10毫秒 中等复杂度表单（十几个字段，一些同步和异步验证）：约10-100毫秒 复杂表单（大量字段，复杂的验证逻辑，多个异步请求）：约100毫秒-1秒	100-200ms	1ms	30-40MB
Formily	200-400ms		50-100ms	0.3ms	20-30MB
Antd-Form	500-1000ms		150-300ms	1.5ms	40-70MB
ReactHookForm	100-200ms	简单表单：约1-5毫秒 中等复杂度表单：约5-50毫秒 复杂表单：约50毫秒-500毫秒	30-50ms	0.1ms	10-20MB

5. 结果分析

库名	性能比较	瓶颈识别
Formik	优化表单校验机制：在用户输入时进行细粒度校验控制，避免用户输入时触发所有表单项的校验。 提供了同步和异步校验，可根据不同的字段或表单状态定制校验逻辑。validateOnChange和validateOnBlur配置选项允许开发者控制何时触发校验，减少不必要的计算。	处理大型表单时性能较差，每个字段的状态变化都可能触发整个表单的重新渲染 使用 React 的上下文来传递表单状态和配置。上下文的改变会触发所有订阅了这个上下文的组件的重渲染。 Formik 为了保持不可变性和可预测性，可能会创建新的状态对象，会导致额外的内存分配和垃圾回收开销。
Formily	虚拟化渲染：当表单包含成百上千的表单项时，使用虚拟滚动。只渲染用户可见的表单项，减少了DOM元素的数量和渲染工作量，提升性能。 精细化状态管理：确保只有必要的表单项状态被更新，避免整个表单或大量表单项的状态重计算和重渲染。 异步验证优化：如果每个输入都触发频繁的异步验证，可能会导致性能瓶颈，优化了异步验证的触发时机和流程，减少了不必要的网络请求和计算。	在大量交互时，其依赖收集和计算可能会成为性能瓶颈， Formily 的响应式设计在频繁更新状态下表现较好，但复杂的依赖关系可能导致性能问题。
ReactHookForm	API 设计简单，因使用useController等钩子提供细粒度的控制，减少不必要的重渲染，频繁更新状态下性能较好。 允许开发者以函数式的方式管理表单字段，使添加和删除字段非常灵活。	使用 React 的 Hook，通常性能较好，但在大量交互时，如果不当使用可能会导致性能问题。
Antd-Form	性能优势和其他三个相比暂无。	通常与 Ant Design 组件库一起使用，其组件的内部实现可能会在大量交互时影响性能。 可能依赖于 Redux，这可能会在频繁更新状态时引入额外的性能开销。

总结：

1. 优化的渲染性能：Formily 的虚拟滚动和 Formik 的渲染优化技术对于处理大量表单项尤为重要。
2. 高效的状态管理：Formik 和 React Hook Form 都提供了高效的状态管理机制，有助于减少不必要的渲染和计算。
3. 灵活的校验性能：Formik 和 Formily 的校验机制允许开发者根据字段变化进行校验，减少不必要的校验执行，从而提高性能。

6. 结论

库名	使用场景	优势	性能要求较高是否选择	易用性和调试	生态整合和组件丰富性	复杂性和自定义需求
Formik	当需要强大的表单状态管理和同步能力，以及灵活的校验和错误处理时。	强大的状态管理和同步能力。 灵活且细粒度的校验控制。 优化了渲染性能，减少了不必要的渲染。	是	否	否	是
Formily	如果应用需要处理动态表单结构，或者表单包含大量字段，Formily 可以提供高效的渲染和动态表单处理能力。	轻量级渲染，特别是虚拟滚动技术的使用。 动态表单结构的支持。 高效的校验性能，只对变化的字段进行校验。	是	否	是	是
ReactHookForm	对于追求简洁性、易用性和调试友好的开发者，React Hook Form 提供了一个轻量级且高性能的解决方案。	极简的 API 和高性能。 开发者友好的调试体验。 灵活且轻量级的表单管理。	是	是	可选	否
Antd-Form	如果项目已经使用了 Ant Design 生态系统，或者需要快速构建具有一致 UI/UX 的表单，Ant Design Form 是一个合适的选择。	与 Ant Design 生态的整合。 丰富的预构建表单组件。 布局和样式支持，易于构建复杂表单。	否	是	是	否

7. 未来工作

在本调研报告中，我们对比分析了 Formik、Formily、React Hook Form 和 Ant Design Form 这四个表单库在处理大量表单项时的性能表现。然而，由于时间和资源的限制，本次调研仍存在一些局限性，以及未来可以进一步深入研究的方向。

1. 局限性
   1. 测试场景的覆盖面：虽然我们测试了初始渲染时间、更新时间、交互响应时间等性能指标，但测试场景仅限于 100 个表单项，且未涵盖所有可能的表单复杂性和交互场景。因此，对于更复杂的表单场景，本次研究的结论可能存在一定的局限性。
   2. 未测量的性能指标：我们主要关注了初始渲染时间、更新时间、交互响应时间和内存使用情况等性能指标。还有一些其他性能指标待测试，如页面加载速度等。
   3. 版本更新影响：随着表单库的持续更新和优化，本次研究的结论可能受到新版本的影响。因此，定期对表单库进行性能测试和对比分析是必要的。
2. 进一步调研：
   1. 更复杂的表单场景：针对更复杂的表单场景，如包含成千上万个表单项、复杂的校验逻辑和动态表单结构等，进行性能测试和对比分析，以便更全面地评估表单库的性能表现。
   2. 移动端性能测试：在移动端设备上，性能问题可能更加突出。所以还需关注针对移动端进行性能测试。
   3. 性能优化策略研究：针对表单库的性能瓶颈，研究有效的性能优化策略，如代码拆分、懒加载等，实现更高的性能提升。

通过进一步的研究和优化，我们可以更全面地了解表单库的性能表现，为开发者提供更实用的性能优化建议，从而更好地满足不同场景下的表单性能需求。