javascript - 用 Formik react 备忘录

Question

我有一个包含很多表单字段的应用程序。我想要一种可以避免重新渲染的方法。我正在使用 Formik 来管理表单。
我正在使用 Formik 的 useField以 React.memo 访问我的子组件中的 Formik 表单值只做一个浅层次的比较。 我想为备忘录方法写一个自定义回调

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
});

由于 prev 和 next 值只能访问传递的直接属性，因此我无法比较 memo 函数中的 Formik 字段值。
要获得 Formik 字段的处理程序，我需要使用 useField ，但这在回调中不起作用，因为它说 Hooks 不能在非 React 方法中使用。
由于我有一个复杂的表单，我需要一个处理程序来在允许渲染之前执行实际的深度比较。
我不想使用 Fastfield，因为它的内部比较同样肤浅。
我正在使用 React 16.13 和 Formik 2.1.5

Answer 1

Formik 在后台使用 React 上下文。这会产生额外重新渲染的问题。看一看
在 article .在您的场景中，简单地添加内存是行不通的，所有组件都嵌套在 <Formik> 中。每当 Formik 的值发生变化时都会重新渲染。相反，您可以尝试使用 withFormik hoc，它不使用引擎盖下的 react 上下文，因此添加 React.memo 将起作用。几天前我不得不处理同样的问题，我发现useFormik , useField , useFormikContext导致所有嵌套组件重新渲染，因此请避免使用这些钩子(Hook)。如果您需要使用 onChange、onBlur、setFieldValue、errors 或 touch - 将它们作为 Prop 传递给您的输入。