반응이 느림 입력 변경시

Question

큰 데이터리스트에서 생성 된 입력 필드에 onChange 메소드를 사용하는 동안 문제가 발생했습니다.
parentcomponent이 데이터의 소유자이기 때문에 하위 구성 요소 (dataTableComponent)에 handleUpdate() 메서드를 제공합니다.
React가 전체 datatgrid를 다시 렌더링해야하기 때문에 입력 onChange은 매우 느립니다.
어떻게하면 좋을까요? 수정 된 행 하나만 업데이트하는 방법이 있습니까? 아니면 내가 무엇을 잘못 대답합니까?

요약 : ParentComponent에는 childComponent로 전달되는 객체가있는 배열이 포함되어 있습니다. childComponent는 데이터 객체 속성이있는 열을 <table> 요소로 만듭니다. 하나의 열은 편집 가능하며 <input> 태그로 표시됩니다. 이 태그는 부모가 전달한 함수를 가리키는 onChangehandler입니다. 부모가 업데이트를 처리하면 전체 목록이 다시 표시됩니다. 나 자신이 분명하기 때문에 느려야한다. 하지만 어떻게하면 더 잘할 수 있을까요?

Answer 1

@ Piyush.kappor 말했다. 그러나 나는 항상 이것이 좋지 않다고 생각했습니다. 날짜가 중복되어 저장됩니다.

이제 드디어 해결책을 찾았습니다.

응용 프로그램 개체의 목록을 포함 토록 입력 변경을 처리 : 그것은처럼

나는 그것을 떠났다. 이것은 매우 느릴 수 있지만 shouldComponentUpdate() 메서드를 추가했습니다. 따라서 모든 행이 업데이트되었는지 확인해야합니다. 그렇지 않은 경우에는 그렇지 않습니다. 따라서 더 이상 지연이 없지만 데이터는 여전히 한 곳에서 처리됩니다.

Answer 2

이 문제는 더 일찍 발생했습니다.

각 행을 별도의 구성 요소로 만들고 상위 구성 요소에 소품을 전달하도록 요청하십시오. 행 구성 요소의 생성자에서 상태에 소품을 저장하고 지금 상태로 재생합니다. 업데이트하려면 부모 처리기를 호출하지 마십시오. 당신의 모든 입력 필드는 상위 구성 요소에서 사용 심판은 데이터를

예를 추출하기 위해, 다시 업데이트하려면

: 내가 좋아하는 그것을 시도했습니다

Class Parent extends React.component { 
    render (
      this.data.map(function(value) { 
       return <Row ref={value+index} data={value}/> 
      }) 
    } 
} 

Class Row extends React.Component { 
    constructor() { 
     super(props); 
     this.state = { 
      value: this.props.data 
     } 
    } 
    render() { 
    <input value={this.state.value}/> 
    } 
}