React with Redux 상태에서 rerendered 전체 양식

Question

동적 JSON 데이터가 있고 JSON을 통해 페이지에 양식을 동적으로 렌더링하는 사용자 지정 방법이 있습니다. JSON 스키마의 이유는 미리 정의되지 않은 다양한 양식을 작성하는 것입니다.

아래 스키마와 formValues가이 클래스의 소품으로 지정되도록 Redux를 연결했습니다. 따라서 폼은 올바른 레이블, 올바른 입력 필드 유형 등으로 올바르게 렌더링됩니다. onChange 이벤트가 필드에서 발생하면 appData (formData 아래)가 올바르게 업데이트됩니다. 그러나 appData에서 formData가 변경되면 전체 양식이 "특정 필드"대신에 다시 렌더링된다는 사실을 알게되었습니다. 이 때문에 formData 아래에 개체로 양식 값을 저장하는 오전? 이 문제를 어떻게 피할 수 있습니까?

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

예 스키마 돌아 오는 상태

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

예제에서는 확실하지 않지만 모든 것을 단일 render() 메서드로 렌더링하는 경우 구성 요소가 다시 렌더링됩니다. 그리고 그것이 구성 요소 인 문제입니다. 여러 구성 요소를 사용하려는 경우 최대한 많이 분할해야합니다. 그렇지 않으면 상태가 변경되면 해당 구성 요소 만 다시 렌더링됩니다. 가능한 한 많이 해체하십시오.

힌트 :

• 사용 ref={}의
• shouldComponentUpdate()

EDIT 구현 (그들은 적용하는 경우 알고 있지만 어쩌면 그나마) : 그냥 이것에 대해 생각을하지만 필드 '값을 저장하는 너의 주에서? 이 doesnt는 정확하다고 느낀다. 통제되는 구성 요소에 대한 React 가이드를 자세히 읽어보십시오. 예를 들어 입력 대신 일반 <span>을 사용하여 렌더링을 시도하고 onKeyPress를 수신합니다. 여전히 작동합니까? 값 속성을 잘못 사용할 수 있습니다.