재 선택이 구성 요소의 렌더링에 미치는 영향

Question

재검색으로 인해 구성 요소의 렌더링이 어떻게 감소되는지 실제로 알지 못합니다. 이것은 내가 재 선택하지 않고 가지고있는 것입니다 :

const getListOfSomething = (state) => (
    state.first.list[state.second.activeRecord] 
); 

const mapStateToProps = (state, ownProps) => { 
    console.log(state.first.list, state.second.activeRecord); 
    return { 
    ...ownProps, 
    listOfSomething: getListOfSomething(state) 
    } 
}; 

그것은 어떤 값에 기초한 어떤 목록의 요소를 합성합니다. 상태가 변경 될 때마다 아무것도이라고 렌더링, 그래서 예를 들어 내 console.log 출력 :

{}, "" 
{}, "" 
{}, "" 
{}, "1" 
{"filled", "1"} 

뭔가가 가게의 다른 부분에서 진행되기 때문이다. 따라서 구성 요소는 5 번, 2 번 중복 렌더링됩니다. 제

{}, "" 
{}, "1" 
{"filled", "1"} 

가 : 제 1 선택기 여기

const getList = state => state.first.list; 
const getActiveRecord = state => state.second.activeRecord; 
const listOfSomething = (list, activeRecord) => { 
    console.log(list, activeRecord); 
    return list[activeRecord]; 
} 
const getListOfSomething = createSelector(getList, getActiveRecord, listOfSomething); 

const mapStateToProps = (state, ownProps) => { 
    console.log(state.first.list, state.second.activeRecord); 
    return { 
    ...ownProps, 
    listOfSomething: getListOfSomething(state) 
    } 
}; 

console.log 출력 :

{}, "" 
{}, "" 
{}, "" 
{}, "1" 
{"filled", "1"} 

및 요소가 올바르게 렌더링 - 3 회

그러나 재 선택하여!

왜 그렇습니까? 구성 요소가 3 번만 렌더링되는 이유는 무엇입니까? 여기에 무슨 일이 벌어지고 있니?

Answer 1

React-Redux의 connect 함수는 shallow-equality 비교에 의존합니다. 저장소가 업데이트되고 구성 요소의 mapState 함수가 실행될 때마다 연결된 구성 요소는 반환 된 개체의 내용이 변경되었는지 확인합니다. mapState이 다른 것을 반환하면 래핑 된 구성 요소를 다시 렌더링해야합니다.

"다시 선택"은 마지막 입력 및 출력의 사본을 저장한다는 것을 의미하는 "memoization"을 사용하고 동일한 입력을 두 번 연속으로 볼 경우 다시 계산하지 않고 마지막 출력을 반환합니다. 따라서 재 입력 기반 선택기 함수는 입력이 변경되지 않은 경우 동일한 객체 참조를 반환하므로 connect은 아무 것도 다르지 않고 래핑 된 구성 요소가 다시 렌더링되지 않을 가능성이 높습니다.

불변 및 비교가 Redux 및 React-Redux와 함께 작동하는 방법에 대한 자세한 내용은 Redux FAQ section on Immutable Data을 참조하십시오.