React-final-form 中 FieldArray 的性能问题

Question

我创建了一个应用程序，其中我使用来自 react-final-form 的 FieldArray 组件。我的数组组件存在性能问题。每个组件还包含大约 8 个字段（每个字段都包含验证规则）（也来自 react-final-form）并且当我添加 50 多个元素时应用程序的滞后（同时将所有组件呈现为虚拟 DOM 并将其与当前 DOM）。有人遇到过这个麻烦吗？

我怎样才能避免这种情况？

Answer 1

要防止重新呈现整个列表，您可以清除 FieldArray 组件中的所有订阅。

 <FieldArray
      name="myList"
      subscription={{}} // This is required so that the whole array does not re-render on any change.
      render={(fieldsProps) => (fieldsProps.fields.map((name, index) =>
            { (...your function here...) })
  />

React-final-form 中 FieldArray 的性能问题

Performance trouble with FieldArray in react-final-form

performance

reactjs

final-form