Redux-form vs formik vs react-hook-form

React 最流行的三个 form 库

  • redux-form, formikreact-hook-form

Package size

  • redux-form 26.4k
  • formik 15k
  • react-hook-form 8.7k

第三方表单验证

  • redux-form 不支持,需手动验证
  • formik 支持,可以使用 Yup schema 验证
  • react-hook-form 支持多种第三方验证,像 Yup, Joi, Superstruct

性能

测试发现:

  • redux-form 性能优异,虽然大家都不喜欢它
  • formikField 组件在大型的 form 表单中会出现性能问题,可以使用 FastField 组件改善
  • react-hook-form 在非受控组件中表现最好但是不会触发 re-render, 但是如果触发了 re-render 性能比不上 redux-formformik

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

以上翻译自同事分享并编辑

posted @   WinjayYu  阅读(1023)  评论(2编辑  收藏  举报
编辑推荐:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .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文件名大小写不敏感
点击右上角即可分享
微信分享提示