React Final Form 在更改其中一个字段时重新渲染所有字段答案

【问题标题】：React Final Form re-renders all fields while changing one of themReact Final Form 在更改其中一个字段时重新渲染所有字段
【发布时间】：2020-03-12 13:56:07
【问题描述】：

它是用文档写的，

<Field/> 将在其订阅的字段状态发生变化时重新呈现。

所以，如果我有几个字段，它们都将被重新渲染，同时只更改其中一个。是否有任何方法可以防止重新渲染目前没有改变的其他字段？

【问题讨论】：

标签： react-final-form final-form

【解决方案1】：

另一种解决方法是使用React.memo（react 版本 >= 16.6.0）

使每个输入字段成为一个单独的组件并将其包装在备忘录中。

export default React.memo(MyInputComponent);

如果您将值向下传递给MyInputComponent，请仅传递所需的道具值而不是整个表单数据对象。

<MyInputComponent value={formData.myValue} />

这样MyInputComponent 只有在formData.myValue 发生变化时才会重新渲染。

【讨论】：

【解决方案2】：

是的，那是因为您的整个表单正在重新呈现。您的问题正是最终形式从头开始设计以允许细粒度渲染控制的原因。

Here's a video我上个月解释过。

查看this example 了解如何操作。

【讨论】：