<FastField />

在开始之前

<FastField /> 用于性能优化。但是，在你真正需要之前，你真的不需要使用它。只有在你熟悉 React 的 shouldComponentUpdate() 工作原理时，才继续进行。我已经警告过你了。

不。说真的。请在继续之前查看官方 React 文档的以下部分

概述

<FastField /> 是 <Field /> 的优化版本，旨在用于大型表单（约 30 个以上字段）或当字段具有非常昂贵的验证要求时。<FastField /> 与 <Field> 具有完全相同的 API，但在内部实现了 shouldComponentUpdate() 以阻止所有额外的重新渲染，除非 <FastField /> 的相关部分/Formik 状态切片有直接更新。

例如，<FastField name="firstName" /> 仅在以下情况下重新渲染：

values.firstName、errors.firstName、touched.firstName 或 isSubmitting 发生更改。这是通过浅比较确定的。注意：支持点路径。
向 <FastField name="firstName" /> 添加/删除属性
name 属性发生变化

除了上述情况外，当 Formik 状态的其他部分发生更改时，<FastField /> 不会重新渲染。但是，由 <FastField /> 触发的所有更新都会触发对其他“普通”<Field /> 组件的重新渲染。

何时使用 `<FastField />`

如果 <Field /> 与表单中的所有其他 <Field /> “独立”，则可以使用 <FastField />.

更具体地说，如果 <Field /> 不更改基于其他 <Field /> 或 <FastField /> 的 Formik 状态切片更新的行为或渲染任何内容，并且不依赖于顶级 <Formik /> 状态的其他部分（例如 isValidating、submitCount），则可以使用 <FastField /> 作为 <Field /> 的直接替换。

示例

1 import React from 'react';
2 import { Formik, Field, FastField, Form } from 'formik';
3 import * as Yup from 'yup';
4 
5 const Basic = () => (
6   <div>
7     <h1>Sign Up</h1>
8     <Formik
9       initialValues={{
10         firstName: '',
11         lastName: '',
12         email: '',
13       }}
14       validationSchema={Yup.object().shape({
15         firstName: Yup.string().required(),
16         middleInitial: Yup.string(),
17         lastName: Yup.string().required(),
18         email: Yup.string().email().required(),
19       })}
20       onSubmit={values => {
21         setTimeout(() => {
22           alert(JSON.stringify(values, null, 2));
23         }, 500);
24       }}
25     >
26       {formikProps => (
27         <Form>
28           {/** This <FastField> only updates for changes made to
29            values.firstName, touched.firstName, errors.firstName */}
30           <label htmlFor="firstName">First Name</label>
31           <FastField name="firstName" placeholder="Weezy" />
32 
33           {/** Updates for all changes because it's from the
34            top-level formikProps which get all updates */}
35           {formikProps.touched.firstName && formikProps.errors.firstName && (
36             <div>{formikProps.errors.firstName}</div>
37           )}
38 
39           <label htmlFor="middleInitial">Middle Initial</label>
40           <FastField name="middleInitial" placeholder="F">
41             {({ field, form, meta }) => (
42               <div>
43                 <input {...field} />
44                 {/**
45                  * This updates normally because it's from the same slice of Formik state,
46                  * i.e. path to the object matches the name of this <FastField />
47                  */}
48                 {meta.touched ? meta.error : null}
49 
50                 {/** This won't ever update since it's coming from
51                  from another <Field>/<FastField>'s (i.e. firstName's) slice   */}
52                 {form.touched.firstName && form.errors.firstName
53                   ? form.errors.firstName
54                   : null}
55 
56                 {/* This doesn't update either */}
57                 {form.submitCount}
58 
59                 {/* Imperative methods still work as expected */}
60                 <button
61                   type="button"
62                   onClick={form.setFieldValue('middleInitial', 'J')}
63                 >
64                   J
65                 </button>
66               </div>
67             )}
68           </FastField>
69 
70           {/** Updates for all changes to Formik state
71            and all changes by all <Field>s and <FastField>s */}
72           <label htmlFor="lastName">LastName</label>
73           <Field name="lastName" placeholder="Baby">
74             {({ field, form, meta }) => (
75               <div>
76                 <input {...field} />
77                 {/**  Works because this is inside
78                  of a <Field/>, which gets all updates */}
79                 {form.touched.firstName && form.errors.firstName
80                   ? form.errors.firstName
81                   : null}
82               </div>
83             )}
84           </Field>
85 
86           {/** Updates for all changes to Formik state and
87            all changes by all <Field>s and <FastField>s */}
88           <label htmlFor="email">Email</label>
89           <Field name="email" placeholder="[email protected]" type="email" />
90 
91           <button type="submit">Submit</button>
92         </Form>
93       )}
94     </Formik>
95   </div>
96 );