2017-11-08 3 views
0

부모가 falseshouldComponentUpdate에 반환하면 connect() ed 하위 구성 요소가 다시 렌더링되는지 궁금합니다.부모의`shouldComponentUpdate` = false 일 경우`connect()`하위 컴포넌트를 다시 렌더링 하시겠습니까?

말, 우리는 구성 요소 트리 mapStateToProps 그들에게 제공 자신의 소품, 같은 유지하는 경우 다시 렌더링해야이

connect(Foo extends PureComponent) 
    DumbBar 
     connect(Baz extends PureComponent) 
그래서

Baz,도 Foo처럼 찾고 있습니다. 그러나 redux 저장소의 상태가 변경되고 connect()edBaz 구성 요소에 상태 변경이 통보되고 새 소품이 제공되면 어떻게됩니까? 다시 렌더링합니까, 아니면 React의 계층 적 업데이트 모델이 렌더링을 방해합니까?

자식 구성 요소가 새로운 렌더링이 조상에 영향을주지 않고 적용될 수 없으므로이 전체 질문은 아마도 약간 꺼져 있습니다. 자식이 변경된 경우 조상이 다시 렌더링하도록 강요합니다.

마지막 점이 true이면 의 하위 항목으로 connect -ed 구성 요소를 두는 것이 치명적입니다. 생각한 모든 최적화가 깨져서 하위 트리의 다른 위치에서 다시 렌더링됩니다 부모의

답변

1

예, 다시 렌더링됩니다.

connect을 사용하는 것이 좋습니다. 소품을 전달할 필요가 없으며 어디서나 삽입 할 수 있으므로 구성 요소를 최신 상태로 유지 관리 할 수 ​​있습니다.

+0

하지만 몸의 두 번째 질문 : 전체 부모와 다른 모든 자녀를 완전히 다시 렌더링하게 할 것인가? 나는 그렇게 추측한다. ..? 이 경우 코드가 바보가 될 수 있습니다 : 부모 구성 요소가 'PureComponent'이고 그 소품이 변경되지 않았으므로 재 렌더링을 기대하지 않지만 일부 코더는 연결된 구성 요소를 하위 트리에 넣었습니다 당신의 모든 최적화를 깨닫지 못한다! – oligofren

+0

'PureComponent'를 보통의 것으로 바꾸면 그렇지 않습니다. 그러면 아무것도 바뀌지 않았을 것입니다. 자식 구성 요소가 부모를 다시 렌더링하더라도 그것이 중요하지는 않습니다. – pwolaq

1

connect으로 빌드 된 각 구성 요소는 redux 저장소의 변경 사항을 알리기 위해 자체 가입을 연결합니다.

하위 구성 요소에 mapStateToProps에 제공된 소품 만 변경된 경우 하위 구성 요소는 다시 렌더링되지만 상위 구성 요소는 그렇지 않습니다.

간단한 console.log를 렌더링 기능에 추가하여 직접 볼 수 있습니다.