<FastField />

開始之前

<FastField /> 主要用於效能*優化*。然而，在真正需要之前，您並不需要使用它。只有在您熟悉 React 的 shouldComponentUpdate() 的運作方式後，才繼續閱讀。我們已經警告過您了。

不開玩笑。在繼續之前，請先查看 React 官方文件中以下部分

概述

<FastField /> 是 <Field /> 的優化版本，適用於大型表單（約 30 個以上欄位）或欄位具有非常昂貴的驗證需求時。<FastField /> 與 <Field> 具有完全相同的 API，但在內部實作了 shouldComponentUpdate()，以阻止所有額外的重新渲染，除非 Formik 狀態中與 <FastField /> 相關的部分/片段有直接更新。

例如，<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="jane@acme.com" type="email" />
90 
91           <button type="submit">Submit</button>
92         </Form>
93       )}
94     </Formik>
95   </div>
96 );