Redux-form vs formik vs react-hook-form
React 最流行的三个 form 库
redux-form
,formik
和react-hook-form
Package size
redux-form
26.4kformik
15kreact-hook-form
8.7k
第三方表单验证
redux-form
不支持,需手动验证formik
支持,可以使用Yup
schema 验证react-hook-form
支持多种第三方验证,像Yup
,Joi
,Superstruct
性能
测试发现:
redux-form
性能优异,虽然大家都不喜欢它formik
的Field
组件在大型的 form 表单中会出现性能问题,可以使用FastField
组件改善react-hook-form
在非受控组件中表现最好但是不会触发 re-render, 但是如果触发了 re-render 性能比不上redux-form
和formik
Npm 下载量
如何迁移
使用 redux-form
的时候,form values 都是存储下 redux
中, 你可以在任何一个地方拿到它,但是迁移到 formik
或者 react-hook-form
, 该如何在 form 外层拿到 values 呢?
- 方案一:提升状态,假设有 B,C 两个组件,B 组件装的是 Form Field, C 组件是负责 submit 的 button, 那么需要在 B, C 组件外面包裹一个 A 组件, 让 A 组件处理 B 组件的表单更新, 然后将 values 传到给 C 组件。 缺点是如果表单比较重,组件 A 需要处理大量逻辑, 而此工作本应该是由 B 来做。
- 方案二:使用 ref
我更倾向于方案一。
结论
从趋势图中可以看到目前 formik
应用最广, react-hook-form
上升很快,redux-form
不建议上车。
优点 | 缺点 | |
---|---|---|
formik | 支持 class component 可以注册非 input 的 field 当用户输入时验证所有字段 |
大型表单中性能不好 hooks API 有很多限制 github 存在很多 issues |
react-hook-form | API 基于 hooks, code 体验很好 性能比较优异 issues相对少 |
不支持没有相应 input 的 field 只支持验证正在编辑的field API 更新比较频繁 |
或许当前 formik 才是最好的选择,当然如果你想尝鲜不妨试试 react-hook-form |
以上翻译自同事分享并编辑
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2019-10-10 Mac os文件名大小写不敏感