React formik 表单渲染速度慢的问题

Question

我正在使用React Formik，该表单有超过30个输入字段，当输入时字段渲染速度很慢，打印速度很慢，并且更轻松，任何提高字段速度的想法都稍微慢一些。请检查codesandbox

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

Answer 1

我也有同样的问题。但当你构建并部署到服务器时它就会消失

Answer 2

另一个解决方法是在

validateOnChange

标签上将

false

设置为

<Formik>

。

<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 次渲染：

1. 表单值改变
2. 状态更改为“isValidating:true”
3. 状态更改为“isValidating:false”

这些渲染会导致大表单上的可怕性能问题，尤其是当用户输入大量字符时。

我已经提出了一种方法来消除验证。 这是什么意思？让我们看一下输入“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

假设一个典型的输入（例如邮件）有 20 个字符。您可以节省大约（60 比 22）大约 40 或三分之一的渲染。

就用户体验而言也是如此。这是最好的体验，因为用户可以自由打字。在“最后一次”击键 200 毫秒后，它将验证表单。

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

Answer 4

通过将 item 组件包装在

memo

中可以部分解决这个问题，就像

const ItemComponent = memo((props: Props) => {
  // here goes inputs etc
})

<FieldArray name="someName">
    {() => 
        <>
           {someData.map(({id, ...props}) => <ItemComponent key={id} {...props} />}           
        </>
    }

</FieldArray>

此解决方案减少了渲染数量，但如果您需要管理列表中的项目，例如添加、删除或使用

ArrayHelpers

中的任何其他方法，并将其方法作为道具传递，例如

{({remove, insert}) => 
        // some code
        {someData.map(({id, ...props}) => 
          <ItemComponent
            key={id}
            {...props}
            remove={remove}
            insert={insert}
          />
        }

渲染数量急剧增加，我还没有找到针对这种情况的解决方案。