如何提高 React Hook Form 中的表单提供程序性能-解网

问：

由于 react 钩子表单提供程序基于上下文 Api，因此对于大型嵌套表单，由于在状态更新期间多次重新渲染，可能会导致性能问题。我在文档中遇到了这一部分：https://react-hook-form.com/advanced-usage#FormProviderPerformance，它基本上使用 react memo 来停止额外的重新渲染，除非属性 isDirty 发生变化。

我将上述实现添加到我的代码中，它有助于加快表单性能，但我现在意识到我的验证不起作用，因为我的备忘录没有检查 formState 的更新。https://codesandbox.io/s/provider-perf-forked-3jqlkj在此示例中，我们可以触发所需的错误消息，但一旦用户键入了某些内容，就无法将其删除。

我还尝试使用 useFormState 钩子，但这意味着我的整个表单结构将重新呈现，导致性能下降。有什么办法可以解决这个问题吗？

reactjs 反应钩子形式

react-hook-form如果您以正确的方式使用它，则不会进行那么多的重新渲染。不要在顶层使用，只在你需要的地方使用。最好进行正确的状态管理，而不是尝试使用来提高性能。确实，它使用上下文 Api，但这并不意味着如果使用得当，它会导致重新渲染formStateReact.memo

0赞 mustadir mahmood 11/14/2023

当我尝试从 useFormContext（）访问 formState 时，它会这样做。从formState中，我需要获取错误对象才能显示验证消息。由于 formState 返回整个窗体的状态，因此会导致重新呈现。如果我更改组件 A 中的输入，它会自动触发 ComponentB 中的重新渲染，因为 ComponentB 正在使用 useFormContext（）中的 formState。

0赞 Oktay Yuzcan 11/14/2023

formState 是一个代理。如果您使用其中的任何内容，则会导致重新渲染。但它仅重新呈现使用更改的属性的组件。为此，您可能需要使用 useController，它将为您提供字段状态。

0赞 mustadir mahmood 11/17/2023

嗨，感谢您的反馈。我知道与 formState 相关的重新渲染复杂性。我有点困惑如何使用useController来实现我的结果。这是一个更新的代码沙盒链接，描述了我的问题： codesandbox.io/s/provider-perf-forked-44yh4x?file=/src/App.js 为了避免重新渲染，我在这里添加了 react 备忘录，但在这样做时，我在用户键入或清除每个输入时无法显示正确的验证消息。如果能对此有一些见解，那就太好了。谢谢

答： 暂无答案

上一个：无法使用 react day picker 和 Next.js 设置初始日期

下一个：RectJS 中的动态表单验证

如何提高 React Hook Form 中的表单提供程序性能

How to improve form provider performance in React Hook Form

评论