Redux表单 - 多重更新功能呈现缓慢

时间:2017-12-07 13:47:14

标签: reactjs redux redux-form

我使用的是redux-form 7.2.0。

在我的项目中,我的表单中有30个字段。

基于第一场值,我需要更新大约20个字段。我称改变行动创造者为20次。渲染这20个字段需要更多时间。很慢。

有没有办法让它在渲染中变快?

有没有办法在单个操作中更新多个字段?

请帮我纠正这个

2 个答案:

答案 0 :(得分:0)

真正唯一正确的答案是使用额外的中间件提供商。请参阅dispatch multiple actions from Redux action creators以了解利弊。

当第一个字段发生更改时,您可以在状态树中的某处设置标记,避免通过shouldComponentUpdate呈现直到所有字段都已更新,然后当所有字段都更新后,将该标志设置回来。

我可以考虑处理这个问题的另一种方法是使用reducer.plugin进行更大的状态更改,但我认为这是一条危险的路径,可能很容易在将来破坏,而不是表现在可预测的方式。

目前,redux-formredux不直接支持批量字段更改。

答案 1 :(得分:0)

只需使用redux表单提供的初始化动作。 有两种使用方法:

  1. https://redux-form.com/7.4.2/examples/initializefromstate/就像在示例中一样,在创建表单时对其进行初始化。

  2. 将“ initialize”操作作为prop传递并调用以一次操作调用来更新所有字段。

    const data = { firstName: 'John', lastName: 'Doe'};
    this.props.initialize(data);
    

    只需确保将字段名称与数据对象中的键匹配。 这将触发一个动作,并且所有字段都将被初始化。