한 항목이 변경되면 React가 전체 목록을 다시 렌더링합니다.

Question

5000 제품의 이름과 가격을 렌더링하는 간단한 반응 앱이 있습니다. 가격은 편집 가능하며 가격은 주에 반영됩니다.

https://github.com/TonyCaffer/thinking-in-react-1

App.js은 상태를 관리하고 나는 불변-헬퍼를 사용하고 ProductTable에 각 ProductRow

아래로 전달되는 onChangePrice 기능을 통해 가격 변화를 처리 나는 특별히 변경된 제품에 대한 상태 레코드 만 변경합니다.

그러나 React가 모든 제품을 다시 렌더링하기 때문에 각 변경마다 눈에 띄는 1 초 지연이 있습니다. 각 제품에는 React가 필요한 구성 요소 만 다시 렌더링하는 데 도움이 될 것으로 생각되는 핵심 속성이 있습니다.

프로덕션 빌드에서는 덜 지연되지만 모든 제품이 다시 렌더링되므로 이는 해결해야 할 근본적인 문제입니다.

왜 모든 제품 구성 요소가 다시 렌더링됩니까? 그것은 this.state.products를 상위 레벨의 ProductTable을 통과시켜 목록의 전체 다시 그리기를 트리거하기 때문입니까? 그렇다면 상태가 목록에있을 때 각 ProductRow가 자체 레코드의 상태를 어떻게 관리 할 수 ​​있습니까?

Answer 1

조정 일정은 조정 단계 (또는 정의한 구성 요소의 렌더링 방법과 관련된 단계를 렌더링하므로)와 커밋 단계의 두 단계로 업데이트됩니다. 상태가 업데이트되면 React는 업데이트 프로세스를 시작합니다.

shouldComponentUpdate(nextProps) { 
    if (
    this.props.guid !== nextProps.guid 
    || // similarly check if the other new props are different 
) { 
    return true; 
    } 
    return false 
} 

것은 위의 검사가 있는지 확인합니다 : A는 shouldComponentUpdateProductRow를 들어, 다음과 같습니다 그 사용이

가

가능한 해결 방법은 당신이 아이 컴퍼넌트에 업데이트의 수를 줄일 수있는 적절한 shouldComponentUpdate의 사용이다 부모가 setState를 탐지하고 새로운 React Fiber의 작업 루프에서 업데이트를 예약 할 때 자식 구성 요소의 재 계산이 수행되지 않고 모든 DOM 업데이트를 건너 뜁니다.

Lin Clark explains the two phases React Fiber가 어떻게 업데이트를 관리하는지 이해하는 데 도움이 될 것입니다.

매우 긴 목록으로인지 된 성능을 개선하기 위해 React Virtualised을 들여다 볼 수 있습니다.