부품 이전 소품 간단한 일 목록 애플리케이션에서 다음 소품

Question

동일 할 때 업데이트되고, I는 Filters 성분 소품을 제공 FiltersContainer 성분을 가지고 변경.

예를 들어 todo 항목을 전환하면 filters 배열과 visibilityFilter은 변경되지 않지만 <Filters /> 구성 요소를 강제로 렌더링합니다. - https://github.com/1ven/react-redux-todos

내가 뭔가를 놓치고 있습니까

// FiltersContainer.js 
function mapStateToProps(state) { 
    const { visibilityFilter } = state.todos; 

    return { 
    filters: '', 
    }; 
} 

전체 응용 프로그램 코드에서 볼 수 있습니다 :

---

문자열 mapStateToProps 기능에 filters 배열을 교체하는 경우,이 구성 요소는 모든 상태 변경에 렌더링되지 않을 것이다?

Answer 1

렌더링 말아.

이 기능은 확인을하지 않고 shallow 만 확인하므로 배열이있는 속성을 포함하는 개체가 같은 개체가 아닌 이유를 확인합니다.

Answer 2

항상 MapStateToProps에서 새 객체를 반환 할 때마다 이전 소품과 새 소품이 일치하지 않습니다. 따라서 구성 요소가 렌더링됩니다 때마다

오래된 소품

return { 
    filters: [{ 
     title: 'All', 
     value: 'SHOW_ALL', 
     active: visibilityFilter === 'SHOW_ALL', 
    }, { 
     title: 'Completed', 
     value: 'SHOW_COMPLETED', 
     active: visibilityFilter === 'SHOW_COMPLETED', 
    }, { 
     title: 'Active', 
     value: 'SHOW_ACTIVE', 
     active: visibilityFilter === 'SHOW_ACTIVE', 
    }], 
    }; 

oldProps의 =이

newProps = 다른 개체입니다 당신이 귀하의 경우에는 새로운 소품 동일하지 않은 경우 구성 요소를 렌더링 반작용 (비록 콘텐츠 모두

oldprops는 == newprops에는 다시 쓰게에게 // 않음) 다른 개체 동일

할 때

return { 
    filters: '', 
    }; 

oldprops = ''; newprops = 선택된 ' oldprops === newprops는 문제가 구성 소품 변경 여부를 확인하기 위해 라이브러리를 사용 react-reduxshallowEqual UTIL 기능이었다