React with Redux状態で再レンダリングされるフォーム全体

Question

動的なJSONデータがあり、JSONを経由してページ上にフォームを動的にレンダリングするカスタムメソッドがあります。 JSONスキーマの理由は、あらかじめ定義されていないさまざまなフォームを作成するためです。

以下のスキーマとformValuesがこのクラスの小道具として割り当てられるようにReduxを接続しました。したがって、フォームは正しいラベル、正しい入力フィールドのタイプなどで正しく表示されます。onChangeイベントがフィールドで発生すると、アプリケーションの状態（formDataの下）が正しく更新されています。しかし、私は、アプリケーションの状態でformDataが変更されたときに、フォーム全体が「特定のフィールド」だけではなく、レンダリングされることに気づいています。これはformDataの下にオブジェクトとしてフォームの値を格納するためですか？どうすればこの問題を回避できますか？

formData = { 
    userName: 'username', 
    firstName: '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方法

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

（制御されたフォーム入力のためのフィールドを更新しますformDataアプリケーション状態）

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

Answer 1

あなたの例ではわかりませんが、すべてのものを1つのrender（）メソッドでレンダリングしている場合は、コンポーネントが再びレンダリングされます。それが問題です、コンポーネントです。複数のコンポーネントを使用する場合は、可能な限り分割する必要があります。それ以外の場合は、状態が変更されると、そこにある唯一のコンポーネントの再レンダリングがトリガーされます。 できるだけ壊してみてください。

ヒント：（彼らは適用された場合知らないけど、多分）

• ref={}の
• 使用はshouldComponentUpdate()

EDIT実装：ちょうどこのことについて考えていますが、フィールドの値を格納しているがあなたの状態で？これは正しいと感じません。制御されたコンポーネントについてのReactガイドをよく読んでください。 （例えば、入力の代わりにプレーンな<span>を使ってレンダリングしようとしても、onKeyPressを聴いても問題ありませんか？