表单无处不在，它是每个网站的必备部分。在用React构建web应用时，处理表单是不可避免的。
你可以选择自己的方式来处理，或者选择社区中现成的库。然而，当你选择一个第三方库时，你会立即面临一个问题：有太多的库可供选择。
选择一个库是一件棘手的事情，随意选择一个GitHub上星标多的库并不总是明智的。你肯定需要阅读文档、代码示例，并多次尝试，才能确定这是你想要用于自己项目的库。
对于处理表单，我们有以下选择：
| 库名称 | GitHub星标 | 下载次数 | 体积 |
|---|---|---|---|
| formik | 23.4K | 868k/周 | 7.22 kB |
| final-form | 2.5K | 222k/周 | 5.1 kB |
| react-Form | 1.9K | 12k/周 | 4.3 kB |
| react-hook-form | 12.5K | 270k/周 | 8.67 kB |
| redux-form | 12.3K | 389k/周 | 26.4 kB |
在这里中，我们将比较下载次数最多的三个库：formik、final-form和react-hook-form。
对于redux-form，我们可以忽略它，毕竟已经是2020年了，没有人会再把每个输入的keystore存储在Redux中，这极其影响性能。而且该库的作者也建议大家转向使用final-form。
使用方式比较
Formik
在GitHub星标数量、下载次数方面，formik是使用人数最多的库，星标最多，下载次数也最多。
老实说，我不喜欢formik的口号“无需含泪构建表单”，因为在React中构建表单和验证从未过于复杂。
使用formik，你需要在组件的render部分直接渲染Formik的Form组件：
1import React from "react";
2import { Formik } from "formik";
3
4const Basic = () => (
5 <div>
6 <h1>在你的应用任何地方！</h1>
7 <Formik
8 initialValues={{ email: "", password: "" }}
9 validate={(values) => {
10 const errors = {};
11 if (!values.email) {
12 errors.email = "必填";
13 } else if (
14 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
15 ) {
16 errors.email = "无效的电子邮件地址";
17 }
18 return errors;
19 }}
20 onSubmit={(values, { setSubmitting }) => {
21 setTimeout(() => {
22 alert(JSON.stringify(values, null, 2));
23 setSubmitting(false);
24 }, 400);
25 }}
26 >
27 {({
28 values,
29 errors,
30 touched,
31 handleChange,
32 handleBlur,
33 handleSubmit,
34 isSubmitting,
35 /* 和其他好东西 */
36 }) => (
37 <form onSubmit={handleSubmit}>
38 <input
39 type="email"
40 name="email"
41 onChange={handleChange}
42 onBlur={handleBlur}
43 value={values.email}
44 />
45 {errors.email && touched.email && errors.email}
46 <input
47 type="password"
48 name="password"
49 onChange={handleChange}
50 onBlur={handleBlur}
51 value={values.password}
52 />
53 {errors.password && touched.password && errors.password}
54 <button type="submit" disabled={isSubmitting}>
55 提交
56 </button>
57 </form>
58 )}
59 </Formik>
60 </div>
61);
62
63export default Basic;
上述代码相当长，并且有一些缺点：
- 你必须在组件内直接渲染Formik组件，这使得你的渲染部分相对混乱。
- 你必须手动将handleChange、handleBlur等函数映射到输入元素上，这项工作相当耗时。不过，你可以使用formik的Field或ErrorMessage组件来节省时间。
- Formik没有内置验证，你需要自己编写函数来验证表单值，或者使用像yup这样的库来支持验证。
- Formik不支持完整的hook，尽管你可以使用useFormik hook，但使用这个hook时，Field、ErrorMessage、FieldArray等组件将无法工作。
Final-Form
final-form由redux-form的作者编写，因此相当有名。
创建一个final-form表单如下：
1import React from "react";
2import { render } from "react-dom";
3import Styles from "./Styles";
4import { Form, Field } from "react-final-form";
5
6const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
7
8const onSubmit = async (values) => {
9 await sleep(300);
10 window.alert(JSON.stringify(values, 0, 2));
11};
12
13const App = () => (
14 <Styles>
15 <h1>React Final Form示例</h1>
16 <h2>密码/确认验证</h2>
17 <a
18 href="https://final-form.org/react"
19 target="_blank"
20 rel="noopener noreferrer"
21 >
22 阅读文档
23 </a>
24 <Form
25 onSubmit={onSubmit}
26 validate={(values) => {
27 const errors = {};
28 if (!values.username) {
29 errors.username = "必填";
30 }
31 if (!values.password) {
32 errors.password = "必填";
33 }
34 if (!values.confirm) {
35 errors.confirm = "必填";
36 } else if (values.confirm !== values.password) {
37 errors.confirm = "必须匹配";
38 }
39 return errors;
40 }}
41 render={({ handleSubmit, form, submitting, pristine, values }) => (
42 <form onSubmit={handleSubmit}>
43 <Field name="username">
44 {({ input, meta }) => (
45 <div>
46 <label>用户名</label>
47 <input {...input} type="text" placeholder="用户名" />
48 {meta.error && meta.touched && <span>{meta.error}</span>}
49 </div>
50 )}
51 </Field>
52 <Field name="password">
53 {({ input, meta }) => (
54 <div>
55 <label>密码</label>
56 <input {...input} type="password" placeholder="密码" />
57 {meta.error && meta.touched && <span>{meta.error}</span>}
58 </div>
59 )}
60 </Field>
61 <Field name="confirm">
62 {({ input, meta }) => (
63 <div>
64 <label>确认</label>
65 <input {...input} type="password" placeholder="确认" />
66 {meta.error && meta.touched && <span>{meta.error}</span>}
67 </div>
68 )}
69 </Field>
70 <div className="buttons">
71 <button type="submit" disabled={submitting}>
72 提交
73 </button>
74 <button
75 type="button"
76 onClick={form.reset}
77 disabled={submitting || pristine}
78 >
79 重置
80 </button>
81 </div>
82 <pre>{JSON.stringify(values, 0, 2)}</pre>
83 </form>
84 )}
85 />
86 </Styles>
87);
88
89render(<App />, document.getElementById("root"));
在我看来，使用final-form的方式与formik类似，但在渲染Form组件后，你必须使用Field组件来传递final-form的props到你的输入元素。
因此，将final-form与react-select等其他React组件集成可能会有些困难。
此外，final-form没有内置验证，你必须自己编写函数来验证表单数据。
Final-form也不支持joi或yup，你必须自己找到方法让final-form能够使用yup，如下所示：链接
React-Hook-Form
第一次看到是在reddit上(www.reddit.com/r/reactjs)上…%25E4%25B8%258A%25EF%25BC%258C%25E5%25BD%2593%25E6%2597%25B6%25E9%25A1%25B9%25E7%259B%25AE%25E4%25B9%259F%25E9%259C%2580%25E8%25A6%2581%25E5%25A4%2584%25E7%2590%2586%25E8%25A1%25A8%25E5%258D%2595%25EF%25BC%258C%25E6%2588%2591%25E8%2587%25AA%25E5%25B7%25B1%25E5%2586%2599%25E8%25A1%25A8%25E5%258D%2595%25E9%259D%259E%25E5%25B8%25B8%25E8%2580%2597%25E6%2597%25B6%25EF%25BC%258C%25E6%2589%2580%25E4%25BB%25A5%25E6%2588%2591%25E5%2586%25B3%25E5%25AE%259A%25E5%25B0%259D%25E8%25AF%2595%25E4%25BD%25BF%25E7%2594%25A8react-hook-form%25E3%2580%2582 “https://www.reddit.com/r/reactjs)%E4%B8%8A%EF%BC%8C%E5%BD%93%E6%97%B6%E9%A1%B9%E7%9B%AE%E4%B9%9F%E9%9C%80%E8%A6%81%E5%A4%84%E7%90%86%E8%A1%A8%E5%8D%95%EF%BC%8C%E6%88%91%E8%87%AA%E5%B7%B1%E5%86%99%E8%A1%A8%E5%8D%95%E9%9D%9E%E5%B8%B8%E8%80%97%E6%97%B6%EF%BC%8C%E6%89%80%E4%BB%A5%E6%88%91%E5%86%B3%E5%AE%9A%E5%B0%9D%E8%AF%95%E4%BD%BF%E7%94%A8react-hook-form%E3%80%82”)
使用react-hook-form的方式如下：
1import React from "react";
2import { useForm } from "react-hook-form";
3
4export default function App() {
5 const { register, handleSubmit, watch, errors } = useForm();
6 const onSubmit = data => console.log(data);
7
8 console.log(watch("example"));
9
10 return (
11 <form onSubmit={handleSubmit(onSubmit)}>
12 <input name="example" defaultValue="test" ref={register} />
13
14 <input name="exampleRequired" ref={register({ required: true })} />
15 {errors.exampleRequired && <span>这个字段是必填的</span>}
16
17 <input type="submit" />
18 </form>
19 );
20}
在这三个库中，我认为react-hook-form是最容易使用的。你只需要使用useForm来创建表单，同时使用register来将输入注册到react-hook-form。
当你将react-hook-form与react-select等其他表单输入库一起使用时，也非常简单，你可以使用setValue函数将该组件的值传递给react-hook-form。
React-hook-form还提供了一些内置函数来验证表单内容：
1import React from "react";
2import { useForm } from "react-hook-form";
3
4export default function App() {
5 const { register, handleSubmit } = useForm();
6 const onSubmit= data => console.log(data);
7
8 return (
9 <form onSubmit={handleSubmit(onSubmit)}>
10 <input
11 name="firstName"
12 ref={register({ required: true, maxLength: 20 })}
13 />
14 <input
15 name="lastName"
16 ref={register({ pattern: /^[A-Za-z]+$/i })}
17 />
18 <input
19 name="age"
20 type="number"
21 ref={register({ min: 18, max: 99 })}
22 />
23 <input type="submit" />
24 </form>
25 );
26}
同时，你也可以使用像yup这样的库来验证表单内容。
react-hook-form 基于非受控组件，这意味着你不需要通过状态和 onChange 事件来更新输入值。相反，你只需要设置 defaultValue。
根据react-hook-form的官网，由于它限制了不必要的组件重新渲染次数，并且具有最低的挂载时间，因此它具有最佳的性能。
另外它体积小（压缩后仅8.6 kB），而且没有外部依赖，使得应用的加载速度更快，同时也减少了项目的复杂性。
结论
react-hook-form是目前最容易使用的库，同时它的文档也非常好。在我看来，react-hook-form唯一的限制是它只能与函数组件一起使用。因此，如果你的项目仍然在使用旧版本的React，那么你就无法使用它。