表单渲染速度慢

Question

我使用的形式有30多个输入字段，在输入时渲染慢，打印慢，稍微慢，任何提高字段速度的想法都可以。请签入密码箱。

代码沙箱链接:https://codesandbox.io/s/goofy-bassi-5s0c9?file=/src/App.js

Answer 1

我也有同样的问题。但是，当您构建并部署到服务器时，它将消失。

Answer 2

另一个解决方法是将validateOnChange设置为<Formik>标记上的false。

<Formik
  validateOnChange={false} // Add this line
  initialValues={{ ... }}
  validationSchema={validationSchema}
>

参考文献：https://github.com/jaredpalmer/formik/issues/2296 https://github.com/jaredpalmer/formik/issues/2542

Answer 3

formik创建大量呈现的主要问题是如何在验证时计算表单的状态。问题是当用户输入“字符”时，出现3：

将"isValidating:true"

• state状态更改为

1. 窗体值更改为
2. 状态改为

这些呈现在大型表单上造成可怕的性能问题，特别是当用户键入大量字符时。

我已经制定了一个要点，用一种方法来揭穿验证。这是什么意思？让我们看一个输入"abcd“正则表单的示例

1. type "a" - 3 renders
2. type "b" - 3 renders
3. type "c" - 3 renders
4. type "d" - 3 renders
total of 12 renders

与取消验证

1. type "a" - 1 render
2. type "b" - 1 render
3. type "c" - 1 render
5. type "d" - 1 render
6. after 200ms 2 more renders for the validation part
total of 6 renders

比方说典型的输入。邮件公司( mail)将有20名charachters。您可以保存大约(60比22)约40或三分之一的渲染。

所以在UX方面。这是最好的体验，因为用户可以自由键入。在“最后一次”击键200 it之后，它将验证表单。

https://gist.github.com/AlonMiz/e583946d3978de691ed53cece972e1a1