我使用react hook表单编写了一个表单，该表单包含30多个字段(材质ui组件(。根据字段的类型，所有字段都有不同类型的验证。
示例文件夹结构如此链接所示。折叠结构
detail_page.js是根组件。在这个组件中，useForm是用defaultValues初始化的。表单用FormProvider(传递给深度嵌套组件的上下文(包装。此外，handleSave方法仅在此组件中编写。单击SAVE按钮后，将调用handleSubmit(handleSave(。从该组件调用TopLevel(top_level.js(组件。
top_level.js文件将字段(作为道具从detail_page.js传递(分组到各个部分。编写一个render方法(renderSections(以显示mui手风琴中的每个部分，该部分中的所有字段都传递给iterator.js文件。renderSections方法使用sectionobject的依赖数组进行存储。
iterator.js文件循环遍历从top_level.js作为道具传递的每个字段，并根据字段的类型(Radio、checkbox、textbox、textarea、email、password、file_uploader、address、latlong、phone_number、list、date、date_range等(调用相应的system_component。
system_component是使用useController/Controller包装材质ui组件的实际组件。根据字段的类型，迭代器中会调用相应的system_component。例如：-
- 用于类型输入的SystemTextBox
- 输入中键入电子邮件的SystemEmail
- 类型日期的SystemDate等等
某些系统组件可能是2个或多个mui组件的组合。例如-SystemLatlong-4个或更多文本输入和数字输入的组合，以显示特定latlong的地址组件。
- SystemArray-其他系统组件的任何组合(为此再次调用迭代器(等等
现在的问题是，每当我点击保存按钮时，保存按钮就会冻结，在handleSubmit方法中，我将MuiBackdrop组件设置为显示"；保存"；文本单击"保存"按钮5秒后调用此背景。在详细页面中，我已经安慰了表单状态的isSubmission、isValidating和isSubmitted状态。我发现，在将近5秒多的时间里，isSubmission状态保持真值，直到handleSave函数不被触发。
原因是react hook表单使用的上下文未针对性能重新渲染进行优化。有了上下文，该上下文的所有消费者都将重新呈现，而不管他们是否关心更改的值。由于react钩子形式具有一个中心上下文，因此当isSubmitting不幸更改时，每个输入都会重新呈现。
我正在构建一个库来解决这个问题，该库目前处于测试版，名为@zerry/react-formz。它保证对输入进行隔离的重新渲染，这意味着无论渲染多少输入，性能都接近恒定。
它处于测试阶段，目前正在开发中，但它可能会解决您遇到的问题。
如果你有兴趣，可以在这里查看：https://react-formz.zerry.dev/docs/performance/
import {
Form,
TextField,
NumberField,
DependentTextField,
} from "@zerry/react-formz";
const NestedInput = () => {
return (
<TextField
required
name="name"
as={({ input }) => <input {...input} />}
/>
)
}
const MyForm = () => {
return (
<Form initialValues={{ name: "", age: "" }}>
<NestedInput />
<NumberField
required
name="age"
as={({ input }) => <input {...input} />}
/>
</Form>
);
};