Redux-form vs formik vs react-hook-form

React 最流行的三个 form 库

• redux-form, formik 和 react-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 性能优异，虽然大家都不喜欢它
• 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

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