如何提高React Form性能（使用Formik）？

Question

在具有许多输入（例如 40 个字段）的 formik 表单中，我可以看到表单很慢。

这是我的 formik 配置：

const formik = useFormik({
        enableReinitialize: true,
        initialValues: contractor,
        validateOnBlur: true,
        validateOnChange: false,
        validateOnMount: true,
        validationSchema: // YUP validation here
      });

这就是我定义字段的方式：

    <TextField
      variant="outlined"
      fullWidth
      id="No"
      name="No"
      label="No"
      value={formik.values.No}
      onChange={formik.handleChange}
      onBlur={handleSubmit}
      error={Boolean(formik.errors.No)}
      helperText={formik.errors.No}
/>

React 不适合处理巨大的表单吗？如何提高 Formik 性能？我做错了什么？

谢谢你！

Answer 1

你尝试过吗

[FastField][1]

？

它说：

FastField 是 Field 的优化版本，旨在用于 大型表单（~30+ 字段）或当字段非常昂贵时 验证要求。

在研究如何处理类似问题时，我遇到了它。

然而，就我而言，这是另外一回事：

validateOnChange: false

极大地提高了性能。

最初我以为问题出在重新渲染上。

formik

对象作为 prop 传递，并在子组件中形成击键触发父组件的重新渲染。即使在子级中移动了

formik

实例后，性能也没有明显改善。将

validateOnChange

设置为

false

就可以了。

在您的情况下，您已经设置了它，因此可以将表单分成几页（向导）。或者用户必须一次更改所有 40 个字段？

Answer 2

尝试在生产环境中运行应用程序。 “使用 create React app 和语义 ui 构建了约 40 个字段。在开发模式下运行应用程序时，输入非常慢。但是当我运行yarn build 并使用serve -s build 运行应用程序时，输入字段没有延迟。 ”

摘自这个问题，看看我认为这会很有帮助。 https://github.com/jaredpalmer/formik/issues/671

此外，有时不仅仅是关于formik和大量的字段， 有时与性能有关，也许有意外的重新渲染需要很长时间或大量的计算，可能会导致这种延迟/性能问题。 我建议尝试使用 React dev-tools 扩展，并找出是否有任何滞后组件或任何计算导致这种情况。

react 文档 - React 开发工具： https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html