javascript - 整个表单在 React 中以 Redux 状态重新渲染

Question

我有动态 JSON 数据，并且有一个自定义方法来遍历 JSON 以在页面上动态呈现表单。 JSON 模式的原因是构建各种未预定义的表单。

我已经连接了 Redux，以便下面的 schema 和 formValues 被分配为此类的 props。因此，表单使用正确的标签、正确的输入字段类型等正确呈现。当字段上发生 onChange 事件时，应用程序状态(在 formData 下)将被正确更新。但我注意到，当应用程序状态中的 formData 发生变化时，整个表单都会重新呈现，而不仅仅是“特定字段”。这是因为我像这样将表单值存储为 formData 下的对象吗？如何避免这个问题？

formData = {
   userName: 'username',
   firstName: 'firstName
}

架构示例

const form =  {
  "fields":[
            {
               "label":"Username",
               "field_type":"text",
               "name":"username"
            },
            {
               "label":"First Name",
               "field_type":"text",
               "name":"firstName"
            }
    ]
  }

Redux 状态

const reducer = combineReducers({
   formSchema: FormSchema,
   formData: Form
});

//渲染方法

render() {
      const { fields } = this.props.form,
      forms = fields.map(({label, name, field_type, required }) => {
      const value = value; //assume this finds the correct value from the "formData" state.
      return (
        <div key={name}>
          <label>{label}</label>
          <input type={field_type}
            onChange={this.onChange}
            value={value}
            name={name} />
        </div>
      );
    })
}

//onchange方法(对于受控表单输入，更新formData应用程序状态中的字段)

onChange(event) {
   this.props.dispatch(updateFormData({
      field: event.target.name,
      value: event.target.value
    }));
}

Answer 1

从你的示例中我不确定，但如果你在单个 render() 方法中渲染整个内容，是的，组件将再次渲染。这就是问题所在，即组件。如果您尝试拥有多个组件，那么应尽可能将它们分开。否则，如果状态发生变化，它会触发唯一组件的重新渲染。尝试尽可能多地打破它。

提示:(不知道它们是否适用，但也许)

• 使用ref={} s
• 实现shouldComponentUpdate()

编辑:刚刚考虑过这一点，但是您是否将字段的值存储在您的州中？这感觉不太正确。请务必仔细阅读有关受控组件的 React 指南。 (例如，尝试使用普通 <span> 代替输入进行渲染，并监听 onKeyPress。它仍然有效吗？如果不是，您可能会滥用 value 属性)