공식적인 React 문서 는 " 는 객체를 얕게 비교하는 것" React.PureComponent이라고 말하고 shouldComponentUpdate(), 상태가 "깊다"면 이에 대해 조언합니다.

이것이 주어지면 React.PureComponentReact 컴포넌트를 만들 때 선호 해야하는 이유가 있습니까?

질문 :

• 사용에있어 성능에 영향 React.Component을 줄 수 React.PureComponent있습니까?
• 내가 추측 오전 shouldComponentUpdate()의 PureComponent유일한 얕은 비교를 수행합니다. 이 경우, 심도있는 비교 방법으로이 방법을 사용할 수 없습니까?
• "또한, React.PureComponent의 shouldComponentUpdate()건너 뜀은 전체 구성 요소 하위 트리에 대한 업데이트를 소품"-이 소품 변경이 무시되는 것을 의미합니까?

도움이된다면 이 중간 블로그 를 읽음으로써 질문이 생겼 습니다.

가장 큰 차이점 React.PureComponent하고 React.Component있다가 PureComponent않는 얕은 비교 상태 변화를. 스칼라 값을 비교할 때는 값을 비교하지만 객체를 비교할 때는 참조 만 비교한다는 의미입니다. 앱 성능을 향상시키는 데 도움이됩니다.

React.PureComponent아래 조건 중 하나라도 만족할 수있을 때 가야 합니다.

• 시 / 도는 불변 개체 여야합니다
• 시 / 도는 계층 구조를 가져서는 안됩니다
• forceUpdate데이터가 변경 될 때 전화해야합니다

사용하는 경우 React.PureComponent모든 하위 구성 요소도 순수한지 확인해야합니다.

React.PureComponent로 갈 때 고려할 수있는 React.component 사용에 성능 영향이 있습니까?

예, 앱 성능이 향상됩니다 (얕은 비교로 인해).

Purecomponent의 shouldComponentUpdate ()가 얕은 비교 만 수행한다고 생각합니다. 이것이 사실이라면, 상기 방법은 더 깊은 비교에 사용될 수 없습니까?

당신은 그것을 올바르게 추측했다. 위에서 언급 한 조건 중 하나라도 만족하면 사용할 수 있습니다.

"또한 React.PureComponent의 shouldComponentUpdate ()는 전체 컴포넌트 서브 트리에 대한 prop 업데이트를 건너 뜁니다."-prop 변경이 무시된다는 의미입니까?

예, 얕은 비교에서 차이를 찾을 수 없으면 소품 변경이 무시됩니다.

Component그리고 PureComponent한 가지 차이점이

PureComponent메소드를 Component처리한다는 점 을 제외하고 는 정확히 동일 shouldComponentUpdate합니다.

때 소품이나 상태 변화, PureComponent할 것 얕은 비교 소품과 국가 모두를. Component반면에 현재 소품과 상태를 다음 상자와 비교하지는 않습니다. 따라서 컴포넌트 shouldComponentUpdate는 호출 될 때마다 기본적으로 다시 렌더링됩니다 .

얕은 비교

이전 props와 state를 next와 비교할 때, 얕은 비교는 primitive가 동일한 값 (예 : 1은 1 또는 true는 true)을 가지며 오브젝트 및 배열과 같은 더 복잡한 자바 스크립트 값 사이에서 참조가 동일한 지 확인합니다.

출처 : https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

내가 본 것처럼 가장 큰 차이점은 구성 요소의 소품과 상태가 변경되었는지 여부에 관계없이 부모가 다시 렌더링 할 때마다 구성 요소가 다시 렌더링된다는 것입니다.

반면에 순수 구성 요소의 소품 (또는 상태)이 변경되지 않는 한 순수 구성 요소는 부모가 다시 렌더링하면 다시 렌더링되지 않습니다.

예를 들어 부모, 자식 및 손자라는 3 가지 수준의 계층 구조를 가진 구성 요소 트리가 있다고 가정합니다.

부모의 소품이 한 어린이의 소품 만 바뀌는 방식으로 변경되면 다음과 같이됩니다.

• 모든 구성 요소가 일반 구성 요소이면 전체 구성 요소 트리가 다시 렌더링됩니다.
• 모든 어린이와 손자가 순수한 구성 요소 인 경우 소품이 변경되었는지 여부에 따라 한 명의 어린이와 한 명의 또는 모든 손자가 다시 렌더링됩니다. 이 구성 요소 트리에 많은 구성 요소가있는 경우 성능이 크게 향상 될 수 있습니다.

그러나 때로는 순수한 구성 요소를 사용해도 아무런 영향이 없습니다. 부모가 redux 매장에서 소품을 받고 어린이 소품의 복잡한 계산을 수행 해야하는 경우가 있습니다. 부모는 플랫리스트를 사용하여 자식을 렌더링했습니다.

결과적으로 redux store에 약간의 변화가 생길 때마다 어린이 데이터의 전체 플랫리스트 배열이 다시 계산되었습니다. 즉, 값이 변경되지 않더라도 트리의 모든 구성 요소에 대해 소품은 새로운 객체였습니다.

이 경우 순수한 구성 요소는 도움이되지 않으며 다시 렌더링이 필요한 경우 shouldComponentUpdate에서 일반 구성 요소를 사용하고 하위 구성 요소를 확인해야만 성능을 향상시킬 수 있습니다.