React.컴포넌트 대 리액트순수 컴포넌트
React 공식 문서에는 다음과 같이 기술되어 있습니다.React.PureComponent의 »shouldComponentUpdate()얄팍하게 오브젝트만 비교하고 상태가 "깊이"인 경우에는 이를 피하도록 조언합니다.
에, 「 」 「 」 「 」 「 」 「 」를 가 있는 이유는 입니까?React.PureComponent리액션?
질문:
- " " " " " " " " " " " " " "Manager"를 사용해도 ?
React.Component우리가 갈 수 있도록React.PureComponent - 추측으로는
shouldComponentUpdate()PureComponent는 얕은 비교만 수행합니다.이 경우, 보다 심도 있는 비교를 위해 방법을 사용할 수 없는 것입니까? - ' '더구나'
React.PureComponent의 »shouldComponentUpdate()skips prop updates for all component subtree" (모든 컴포넌트 서브트리의 prop updates) :
도움이 되는지 이 매체 블로그를 읽으면서 의문이 생겼다.
의 주요 React.PureComponent ★★★★★★★★★★★★★★★★★」React.ComponentPureComponent는 상태변화를 간략하게 비교합니다.즉, 스칼라 값을 비교할 때는 값을 비교하지만 객체를 비교할 때는 참조만 비교합니다.앱의 성능을 향상시키는 데 도움이 됩니다.
는 당 React.PureComponent아래 조건 중 하나를 충족할 수 있는 경우
- 주/제안은 불변의 객체여야 합니다.
- 주/제안은 계층을 가질 수 없습니다.
- 요.
forceUpdate시
「 」를 사용하고 React.PureComponent모든 하위 구성 요소도 순수해야 합니다.
React.component 사용 시 성능에 영향이 있습니까?Pure Component?
네, 앱 성능이 향상됩니다(비교 범위가 좁기 때문에).
Pure component의 Component Update()는 얕은 비교만 수행해야 한다고 생각합니다.이 경우 자세한 비교에 사용되는 메서드는 사용할 수 없습니까?
맞혔어요.위의 조건 중 하나를 만족하시면 사용하실 수 있습니다.
"더구나, 리액트.PureComponent's show ComponentUpdate()는 컴포넌트 서브트리 전체의 prop 업데이트를 건너뜁니다." - 이는 prop 변경이 무시됨을 의미합니까?
네, 얄팍한 비교에서 차이를 찾을 수 없는 경우 소품 변경은 무시됩니다.
Component ★★★★★★★★★★★★★★★★★」PureComponent 가지 가 있다
PureComponent, is, is, is, is, is, is, 과 똑같다Component, 하는 것은 .shouldComponentUpdate방법을 가르쳐 주세요.
소품이나 상태가 바뀌면PureComponent소품과 스테이트를 얄팍하게 비교합니다. Component한편, 현재의 소품이나 상태를, 개봉 후와는 비교하지 않습니다..shouldComponentUpdate출됩니니다다
얕은 비교
이전 소품 및 상태를 다음 소품 및 상태와 비교할 때 원시 요소의 값이 같고(1과 같거나 참과 같음) 개체 및 배열과 같은 보다 복잡한 Javascript 값 간에 참조가 동일한지 확인합니다.
출처 : https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81
가장 큰 차이점은 컴포넌트의 소품이나 상태가 변화했는지 여부에 관계없이 컴포넌트는 부모가 재렌더할 때마다 재렌더된다는 것입니다.
반면 순수한 구성요소는 순수한 구성요소의 지지대(또는 상태)가 변경되지 않는 한 부모가 재렌더하는 경우 재렌더되지 않습니다.
예를 들어 부모, 자녀 및 손자의 3가지 계층 구조를 가진 구성 요소 트리가 있다고 가정합니다.
부모의 소품이 한 아이의 소품만 변경되는 방식으로 변경된 경우:
- 모든 컴포넌트가 일반 컴포넌트일 경우 컴포넌트 트리 전체가 재렌더됩니다.
- 만약 모든 자녀와 손주가 순수한 구성요소라면, 그들의 소품이 바뀌었는지 여부에 따라 오직 한 명의 자녀와 한 명의 손자 혹은 모든 손녀가 다시 태어날 것이다.이 컴포넌트 트리에 컴포넌트가 많을 경우 퍼포먼스가 크게 향상될 수 있습니다.
그러나 순수한 컴포넌트를 사용해도 영향이 없을 수 있습니다.부모가 레독스 매장에서 소품을 받아 자녀 소품에 대해 복잡한 계산을 해야 했을 때 그런 일이 있었습니다.부모는 아이들을 렌더링하기 위해 플랫리스트를 사용했다.
그 결과 리덕스 스토어에 작은 변화가 있을 때마다 어린이 데이터의 전체 플랫리스트 배열이 다시 계산되었습니다.즉, 트리의 모든 컴포넌트에 대해 값이 변경되지 않더라도 소품은 새로운 오브젝트입니다.
이 경우 순수 구성 요소는 도움이 되지 않으며 성능 향상은 일반 구성 요소를 사용하고 렌더가 필요한 경우 wakeComponentUpdate에서 하위 구성 요소를 체크인하는 것만으로 달성할 수 있습니다.
일반 컴포넌트보다 Pure Component가 더 효율적이라고 생각합니다.사실 너무 많은 코드를 쓸 필요가 없으며, 이 코드로 인해shouldComponentUpdate()방법을 가르쳐 주세요.
언급URL : https://stackoverflow.com/questions/41340697/react-component-vs-react-purecomponent
'programing' 카테고리의 다른 글
| MongoDB Java 드라이버 MongoOptions를 실가동용으로 설정하는 방법 (0) | 2023.03.12 |
|---|---|
| RxJ의 파이프란 무엇입니까? (0) | 2023.03.12 |
| 스프링 부트에서의 휴지 상태 필드 이름 지정 문제(이름 지정 전략) (0) | 2023.03.12 |
| if 스테이트먼트(ng-click) (0) | 2023.03.12 |
| 요소 또는 페이지 작성기 단축 코드 문제 (0) | 2023.03.12 |