React Hook Form vs Redux Form

(公众号同步文章:https://mp.weixin.qq.com/s/IUAldltW9ywZ9kXB-NCDxA)

Redux Form 想必 React 开发者们非常熟悉,在 Redux 流行的那几年里,Redux Form 是表单页面的标配,但是随着前端的发展与成熟,一些过渡设计的理念逐渐被大家抛弃,Redux 就是便是其中之一。
在大型的前端应用中,全局的数据管理一直是个比较棘手的问题,Redux 在这种场景下发挥了它的的优势,但微前端的组织模式流行起来后,我们的巨石应用逐渐分拆成了一个个的小型应用,Redux 由于其过多的样板代码以及性能问题,继续使用的必要性就不大了,完全可以使用 React 自带的 Provider 代替,依赖 Redux 的 React From 自然也有其他更好的选择。
从三个最流行的表单库下载量趋势图中可以看到,React Hook Form 自 2022 年领先后就一路向上不回头了,事实也证明它真的好用。

“Performant, flexible and extensible forms with easy-to-use validation”
上面是 React Hook Form 官网的一句概括,翻译过来是“高效、灵活且可扩展的表单,具有易于使用的验证功能”。

和 Redux Form 对比:

何时选择 React Hook Form:
中小型应用程序,配置简单,开发效率高。
重点考虑性能和包大小的项目。
具有简单到中等复杂程度验证逻辑的表单。

何时选择 Redux Form:
已经使用了 Redux 的大型项目。
需要与全局应用程序状态进行交互的表单。
需要大量自定义验证和规范化的场景。
需要跟踪表单数据的变化,比如使用 Redux 浏览器插件查看数据。

使用样例

React Hook Form:

`
import React from 'react';
import { useForm } from 'react-hook-form';

function SimpleForm() {
const { register, handleSubmit, errors } = useForm();

const onSubmit = (data) => {
console.log(data);
};

return (


<input
name="email"
ref={register({
required: 'Email is required',
pattern: {
value: /^\S+@\S+$/i,
message: 'Invalid email format'
}
})}
/>
{errors.email && {errors.email.message}}

  <input 
    name="password" 
    type="password" 
    ref={register({ required: 'Password is required' })} 
  />
  {errors.password && <span>{errors.password.message}</span>}
  
  <button type="submit">Submit</button>
</form>

);
}
`

Redux Form:

`
import React from 'react';
import { Field, reduxForm } from 'redux-form';

const validate = values => {
const errors = {};
if (!values.email) {
errors.email = 'Email is required';
} else if (!/^\S+@\S+$/i.test(values.email)) {
errors.email = 'Invalid email format';
}
if (!values.password) {
errors.password = 'Password is required';
}
return errors;
};

const renderField = ({ input, label, type, meta: { touched, error } }) => (

{touched && error && {error}}
);

const SimpleForm = props => {
const { handleSubmit } = props;
return (





);
};

export default reduxForm({
form: 'simple',
validate
})(SimpleForm);
`

多数场景下,笔者倾向使用 React Hook Form,它使用了 React hooks 的风格,简单易用性能好,不依赖其他库。

posted @   WinjayYu  阅读(14)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 普通人也能轻松掌握的20个DeepSeek高频提示词(2025版)
点击右上角即可分享
微信分享提示