Question

我有一个带有很多表单字段的应用程序。我想要一种可以避免重新渲染的方法。我已经使用formik来管理表单。

我正在使用formik钩useField来访问子组件中的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值只能访问传递的直接属性，因此我无法比较备忘功能中的formik字段值。

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

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

我不想使用Fastfield，因为它的内部比较也很浅。

我正在使用React 16.13和Formik 2.1.5

Answer 1

Formik 在幕后使用 React 上下文。这会产生额外重新渲染的问题。看一看在article。
在你的场景中，简单地添加记忆是行不通的，每当 Formik 的值发生变化时，所有嵌套在 <Formik> 中的组件都会被重新渲染。相反，你可以尝试使用 withFormik hoc，它不使用反应上下文在引擎盖下，因此添加 React.memo 将起作用。

几天前我不得不处理同样的问题，我发现 useFormik, useField, useFormikContext 会导致所有嵌套组件重新渲染，所以只需避免使用这些钩子。如果您需要使用 onChange、onBlur、setFieldValue、errors 或 touch - 将它们作为道具传递给您的输入。

与Formik反应备忘录

1 个答案: