나는 react-native와 redux를 사용하여 android 응용 프로그램을 구현 중입니다. 내 컨테이너 구성 요소는 자주 업데이트되지만 하위 상태 비 저장 구성 요소에 전달하는 소품은 변경되지 않지만 항상 다시 렌더링됩니다. 이 재 렌더링을 방지하려면 어떻게해야합니까? shouldComponentUpdate을 사용할 수 있다는 것을 알고 있지만 모든 속성을 확인해야합니다.소품이 변경되지 않는 이유는 무엇입니까?
이것이 React가 당신을 대신해서하는 이유입니다. 모든 속성 과 그 자녀 (및 자손)을 확인해야합니다. 이것은 많은 일이 될 수 있습니다.
React-Redux를 사용하는 경우 Redox는 데이터에 대해 다른 가정을하기 때문에 필요한 데이터가 무엇이든간에 구성 요소를 connect으로 바꾸어 재사용하면 안됩니다. 특히 불변의 객체를 사방에 사용한다고 가정하기 때문에 자식 (또는 하위 객체)을 확인할 필요가 없습니다.
React-Redux가 없으면 shouldComponentUpdate을 구현해야하지만 변경 불가능한 데이터를 사용하는 경우 일반 비교 기능을 구현하여 모든 비교 구성 요소에서 비교할 수 있습니다. 어디에서나 변경할 수없는 데이터를 사용하지 않는 경우 심층 비교를 사용하거나 특정 검사를 수행하기 위해 구성 요소별로 shouldComponentUpdate을 최적화하여 구현해야합니다.
이것은 React-Redux가 사용 된 큰 이유입니다.
그래서 React가 작동합니다. 부모 구성 요소가 다시 렌더링되면 모든 자식이 다시 렌더링되고 React가 가상 DOM 출력을 차등화하고 실제 UI에서 실제로 업데이트해야하는 것을 확인합니다. 이 프로세스는 하위 구성 요소로 전달되는 소품이 변경되지 않은 경우에도 발생합니다. 그리고 예, shouldComponentUpdate은 여기에 적합한 해결책이지만 수명주기 방법이 없으므로 기능 구성 요소와 함께 사용할 수 없습니다.
재 렌더링을 방지하려면 해당 기능 구성 요소를 클래스 구성 요소로 변환하고 직접 shouldComponentupdate을 구현하거나 React 15.3을 사용하는 경우 React.PureComponent으로 확장해야합니다.
소품이 변경되지 않으면 React.PureCompont에서 확장 된 구성 요소가 다시 렌더링되지 않습니까? – Tino
이전에, React는'React.createClass' 방법으로 구성 요소를 만드는'PureRenderMixin'을 제공했습니다. 그것들은 더 이상 사용되지 않으므로 새로운'PureComponent' 기본 클래스를 추가했습니다.이 클래스는 얕은 평등 검사'shouldComponentUpdate'를 갖는 것처럼 동작합니다. – markerikson
다른 사람들을 위해 이것을 남겨 둘 것입니다 : '프로파일 링 후 특정 구성 요소의 속도가 느린 것으로 판단하는 경우, 얕은 부분 및 상태 비교로 shouldComponentUpdate()를 구현하는 React.PureComponent에서 상속하도록 변경할 수 있습니다. .' – Tino
예'React-Redux'와 불변 객체를 사용하고 모든 속성에 컨테이너 (탭 표시 줄보기) 컴포넌트를 연결 한 다음 상태가없는 팝업 컴포넌트를 가지고 있기 때문에 저장소에서 필요한 속성에 다시 연결해야합니다 ? 왜냐하면 컨테이너 구성 요소 만 연결해야한다고 생각하기 때문입니다. – Tino
'mapStateToProps'와'mapDispatchToProps'가 빈 객체를 반환하더라도 (당신을 위해 얕은 shouldComponentUpdate를 구현합니다) 무엇이든 연결할 수 있습니다. 본질적으로, '연결'을 만드는 HOC는 프리젠 테이션 구성 요소 주위의 컨테이너가됩니다. 또는'shouldComponentUpdate'를 작성하거나 React가 그것을 정렬하도록 할 수 있습니다 (작은 구성 요소 인 경우 걱정할 필요가 없습니다). – DDS