PureComponent의 shallowCompare가 예상대로 작동하지 않습니다.

Question

PureComponenet에서 확장하여 자식 구성 요소를 불필요하게 다시 렌더링 (검토)하지 않으려합니다.

이 구성 요소는 PureComponent가 아닌 상위 구성 요소 (리뷰)에서 호출되고 있습니다.

디버깅을 통해 리뷰 중 하나가 변경 될 때마다 해당 제품과 관련된 모든 리뷰가 다시 렌더링되는 것을 볼 수 있습니다. 분명히 리뷰 소품은 업데이트되고 개별 리뷰의 관련 소품이 개별 검토 구성 요소로 전달됩니다. 나는 또한이 메시지가 표시되는 ,

nextProps.reviewer === this.props.reviewer_info -> false 
nextProps.reviewer_info = [] 
this.props.reviewer_info = [] 

나는 pureComponent, 2 개 빈 배열을 비교하면서 shallowCompare하고 true를 돌려 사용하는 올바른 것입니다 있다고 생각?

내 자식 구성 요소의 불필요한 렌더링을 막으려면 부모 구성 요소가 PureComponent 일 필요가 있습니까? 그게 빠진 부분 이니?

내 검토 구성 요소에는 다른 하위 구성 요소가 있으며, pureComponents로 선언해야합니다. (부품을 업데이트 하겠지만, 검토 컴포넌트가 pureComponent의 이점을 얻지 못하도록합니까?)

이상은 pureComponent를 사용하더라도 올바른 렌더링 이유가 아니며 다른 부분이 누락 되었습니까?

Answer 1

내 자식 구성 요소의 불필요한 렌더링을 막으려면 부모 구성 요소가 PureComponent 일 필요가 있습니까?

아니요, 필요하지 않습니다.

pureComponent는 shallowCompare를 사용하며 빈 배열 2 개를 비교하는 동안 true를 반환해야한다고 생각합니까? 맞습니까?

아니요. 얕은 비교에서는 ===을 사용하여 props 및 state에있는 각 속성의 이전 값과 새 값을 비교합니다. 하지만 브라우저 콘솔에서 볼 수 있듯이 [] === []은 false입니다. 이는 각 [] 표현식이 다른 표현식과 다른 새로운 배열 객체를 만들기 때문입니다.

결과, 간단한 어레이로서

또는 Reviews가 PureComponent의 효과를 무효화 렌더링 될 때마다 다시 쓰게 Review의 트리거하는 속성 (예를 들어 <Review prop={[]}/>) 리터럴 개체.

최적화 된 동작을 즐기려면 각 프리미티브가 아닌 객체가 값이 변경되지 않는 한 동일한 객체 인스턴스를 계속 참조해야합니다 (예 : Review의 상태로 유지). 또한 이 변경된 경우이 변경되면 기존의 내부를 수정하지 말고 해당 소품에 대한 새로운 최상위 개체를 만들어야합니다 (따라서 push을 사용하지 않거나 직접 소품 개체 속성에 할당).) immutable-js 패키지가 유용 할 수 있지만 es6 스프레드 연산자는 잘 작동합니다.

내 검토 구성 요소에는 다른 하위 구성 요소가 있으며, pureComponents로 선언해야합니다.(내가 그들을 업데이트 할 수 있지만 pureComponent의 혜택을 달성에서이 정지 검토 구성 요소를 수행 할 것인가?) 당신이 Reviews의 렌더링 방법의 아이를 작성하지 않는 한

그것은 (Review에 영향을 미치지 않습니다, <Review ..>..<Child ../>..</Review>처럼,이 경우 props.children 것 매번 변경되고 다시 렌더링됩니다.)