슈퍼 컴포넌트의 상태가 변경되었을 때 라우터 내부에 있는 컴포넌트의 재렌딩을 방지하는 방법?

슈퍼 컴포넌트의 상태가 변경되었을 때 라우터 내부에 있는 컴포넌트의 재렌딩을 방지하는 방법?

상위 구성요소의 상태를 업데이트하면, 라우터로 포장된 구성요소의 내부 하위 구성요소도 다시 렌더링되어 하위 구성요소의 상태가 초기값으로 재시작된다.아이에게 어떤 소품도 건네주지 않고 의존하지 않을 때도 말이다.

어떻게 하면 이것을 막을 수 있을까?여기서 데모를 찾을 수 있다.자식 구성 요소의 상태를 전환한 다음 부모 구성 요소의 상태를 변경하면 무슨 일이 벌어지는지 알 수 있다.

네 문제에 대한 간단한 해결책이 있어!

인index.js, 이 행 변경:

<Route exact path="/" component={props => <Sub {...props} />} />

이 경우:

<Route exact path="/" render={props => <Sub {...props} />} />

의 차이점component그리고render익명의 기능이 있는 소품은 다음과 같다.component={() => <YourComponent />}부모가 그럴 때 항상 재탕할 것이다.와 함께render그러나, 재시도는 필요할 때만 일어난다.

만약 당신이 이 주제에 대해 더 알고 싶다면 이 기사를 읽는 것을 추천한다: https://tylermcginnis.com/react-router-pass-props-to-components/.

차이점을 보기 위해 코드샌드박스 예를 들어보자. https://codesandbox.io/s/goofy-fermat-m01ct

참조URL: https://stackoverflow.com/questions/59239853/how-to-prevent-re-rendering-the-component-which-is-inside-router-when-the-state