mapStateToProps 출력을 기반으로 connect() ed 구성 요소를 다시 렌더링

Question

React + Redux 기반 프로젝트에서 API 가져 오기를 통해 사용자 권한을 확인하는 connect() ed 구성 요소가 있습니다. 가져온 사용 권한은 Redux 저장소에 저장됩니다.

구성 요소는 기본적으로 <Can check="...">...</Can>처럼 보이며 Google API (Redux 작업을 통해)와 대화하여 문제를 해결합니다. 권한이 부여되면 this.props.children이 렌더링되고 그렇지 않은 경우 null이 렌더링됩니다.

그 점을 감안하면 mapStateToProps()은 상점의 인증 데이터에서 passes 소품을 계산합니다. 이는 방법으로 확인됩니다. mapStateToProps()에 ownProps 매개 변수를 사용하여 "검사 할 항목"을 가져오고 passes 플래그를 계산합니다.

계속 캐싱이 진행되므로 모든 구성 요소 마운트를 다시 가져 오지 않으며 기본적으로 작동합니다. 그래도 passes 보조가 true으로 업데이트되면 구성 요소가 다시 렌더링되지 않습니다 (그러나 탐색 라우터를 사용하여 다시 탐색 한 다음 렌더링을 다시 수행하므로 기본적으로 구성 요소가 다시 마운트 된 경우 렌더링됩니다).

mapStateToProps()의 출력이 변경되면 connect() 에드의 구성 요소가 다시 렌더링됩니까? react-redux의 connect()에 대한 문서는이 말을 :

ownProps가 두 번째 인수로 지정하면, 그 값이 구성 요소에 전달 된 소품이 될 것이며, 구성 요소가 새로운 소품을 수신 할 때마다 mapStateToProps 다시 호출됩니다.

ownProps을 전달하면 소품이 변경되거나 다른 방법으로 렌더링되는 경우에만 렌더링이 변경된다는 의미입니까? 메모와 관련하여 메모를 이해하고/mapStateToProps()에서 함수를 반환하거나 그와 관련이없는 것은 무엇입니까?

당신이

Answer 1

연결 마십시오 감사() 에드 구성 요소가 다시 렌더링 mapStateToProps의 출력은()가 변경되면? react-redux의 connect()에 대한 문서는 다음과 같이 말합니다.

함수 출력 자체는 변경할 수 없습니다. 무엇인가 먼저이 함수를 다시 평가해야합니다.

Redux 상태가 변경되면 mapStateToProps이 재평가됩니다.

소품 부모 구성 요소로부터받은 경우

는 와는 당신이 ownProps 인수를 사용, mapStateToProps도 다시 평가 얕게 불평등 (변경)입니다.

mapStateToProps이 마지막 호출과 동일한 값을 얕게 반환하면 React Redux는 렌더링을 건너 뜁니다. 균등하지 않은 값을 얕게 반환하면 래핑 된 구성 요소가 다시 렌더링됩니다. mapStateToProps 자체가 순수 함수라고 가정합니다.사실

에 패스 소품 업데이트가이 재생 최소한의 프로젝트를 생성하고 관련 코드 예제와 문제를 제출하시기 바랍니다 때

은 가끔하지만, 구성 요소가 다시 렌더링되지 않습니다.

memoization에 대한 메모/mapStateToProps()에서 함수를 반환하는 방법을 어떻게 이해할 수 있습니까?

관련 없음.

Answer 2

여러 가지 여기 알고 :

1. connect 현재 mapState 통화에 마지막 mapState 호출의 출력을 얕은 비교합니다. 변경된 사항이 없으면 래핑 된 구성 요소를 다시 렌더링하지 않습니다.
2. 기본적으로 connect은 저장소가 구독자에게 알릴 때 mapState만을 실행합니다. 그러나 mapState 함수가 두 개의 매개 변수를 취하는 것으로 선언 된 경우 connect은 두 번째 인수로 래핑 된 구성 요소의 소품을 전달하므로 state.somePerItemData[ownProps.itemId]과 같은 작업을 수행 할 수 있습니다. 들어오는 소품이 다를 때마다 mapState의 출력에 영향을 줄 수 있으므로 언제든지 mapState을 호출합니다.
3. Reselect의 기본 메모는 선택기 기능 당 하나의 캐시 된 값만 유지합니다. 여러 번 인스턴스화 된 구성 요소가 있고 모든 인스턴스가 동일한 선택기 함수 인스턴스를 공유하는 경우 선택기의 메모는 원하는 방식으로 작동하지 않습니다. 각 구성 요소 인스턴스가 다른 입력 (예 : 그들 자신의 소도구). 따라서 크게 최적화 된 팩토리 함수를 mapState 인수로 전달하면 각 구성 요소 인스턴스에 대해 고유 한 선택기 함수 인스턴스를 만들 수 있습니다.

모두 제가 말했듯이, 업데이트되지 않은 구성 요소에 대한 귀하의 실제 질문에 대한 구체적인 대답은 없습니다. 아마도 코드를 좀 더 자세하게 볼 필요가 있습니다.