使用 Formik 反应备忘录

Question

我有一个包含很多表单字段的应用程序。我想要一种可以避免重新渲染的方法。我正在使用 Formik 来管理表单。

我正在使用 FormikuseField来访问子组件中的 Formik 表单值，因为React.memo仅进行浅层比较。我想为 memo 方法编写一个自定义回调

function MainForm3() {
  const initialValues = { txtArea: "" };
  return (
    <Formik initialValues={initialValues}>
      {(formik) => {
        return (
          <>
            <TextArea
              name={"txtArea"}
              rows={3}
              id={"txtArea"}
              label={"txtArea"}
            />
          </>
        );
      }}
    </Formik>
  );
}

function TextArea(props: any) {
  const [field] = useField(props);

  return <TextField {...field} />;
}

React.memo(TextArea, (prev, next) => {
  //how do i get access to the formik to perform a comparison
});

由于上一个值和下一个值只能访问传递的直接属性，因此我无法比较备注函数中的 Formik 字段值。

要获取 Formik 字段的处理程序，我需要使用 a useField，但这在回调中不起作用，因为它说 Hooks 不能在非 React 方法中使用。

由于我有一个复杂的表单，我需要一个处理程序来在允许渲染之前执行实际的深度比较。

我不想使用 Fastfield，因为它的内部比较同样浅薄。

我正在使用 React 16.13 和 Formik 2.1.5

Answer 1

Formik 在底层使用 React 上下文。这会产生额外重新渲染的问题。看看\n这篇文章。在你的场景中，简单地添加记忆是行不通的，只要 Formik 的值发生变化，
嵌套的所有组件都会重新渲染。相反，你可以尝试使用withFormik hoc，它不会在幕后使用 React 上下文，因此添加 React.memo 就可以了.\xc2\xa0几天前我不得不处理同样的问题，我发现, ,导致所有嵌套组件重新渲染，所以只要避免使用这些钩子即可。如果您需要使用 onChange、onBlur、setFieldValue、errors 或 Touched - 将它们作为 props 传递给您的输入。<Formik>

useFormikuseFielduseFormikContext

\n