React Final Form 在更改其中一个字段时重新呈现所有字段
React Final Form re-renders all fields while changing one of them
它写在文档中,
The <Field/>
will rerender any time the field state it is subscribed to changes.
所以,如果我有多个字段,所有字段都将被重新渲染,同时只更改其中一个。
是否有任何方法可以防止重新呈现目前未更改的其他字段?
是的,那是因为您的整个表单都在重新呈现。您的问题正是最终形式从头开始设计以允许细粒度渲染控制的原因。
Here's a video 我上个月解释过。
查看 this example 如何操作。
另一种解决方法是使用 React.memo
(反应版本 >= 16.6.0)
使每个输入字段成为一个单独的组件并将其包装在备忘录中。
export default React.memo(MyInputComponent);
如果您将值向下传递给 MyInputComponent
,请仅传递所需的属性值 而不是整个表单数据对象。
<MyInputComponent value={formData.myValue} />
这样 MyInputComponent
只有在 formData.myValue
发生变化时才会重新渲染。
它写在文档中,
The
<Field/>
will rerender any time the field state it is subscribed to changes.
所以,如果我有多个字段,所有字段都将被重新渲染,同时只更改其中一个。 是否有任何方法可以防止重新呈现目前未更改的其他字段?
是的,那是因为您的整个表单都在重新呈现。您的问题正是最终形式从头开始设计以允许细粒度渲染控制的原因。
Here's a video 我上个月解释过。
查看 this example 如何操作。
另一种解决方法是使用 React.memo
(反应版本 >= 16.6.0)
使每个输入字段成为一个单独的组件并将其包装在备忘录中。
export default React.memo(MyInputComponent);
如果您将值向下传递给 MyInputComponent
,请仅传递所需的属性值 而不是整个表单数据对象。
<MyInputComponent value={formData.myValue} />
这样 MyInputComponent
只有在 formData.myValue
发生变化时才会重新渲染。