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 } }) => (

{label}

{touched && error && {error}}

);

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



Submit

);
};

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

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