React Native + Redux 응용 프로그램의 ListView 성능

Question

나는 분명히 일부 항목의 목록을 렌더링하는 ListView을 가지고 있습니다. 이전에는 Redux없이 React Native를 사용 했으므로 기본 데이터가 변경되면 setState()을 호출하여 데이터를 수정 한 다음 dataSource = dataSource.cloneWithRows(itemsData);이라고 말하면서 꽤 성능이 좋았습니다. 데이터가 변경된 경우 각 행이 다시 렌더링되었습니다 (예 : rowHasChanged()은 해당 행에 대해 true을 반환했습니다.

그러나 전반적인 응용 프로그램 디자인은 상당히 임시적이고 유지 관리가 쉽지 않았기 때문에 Redux를 사용하기로 결정했습니다.

이제 내 장면은 "순수"합니다. 즉, 전달 된 소품에만 의존하며 이는 mapStateToProps()을 통해 생성됩니다. 그러나 문제는 모든 항목이 변경 될 때마다 전체 ListView 요소가 다시 만들어 지므로 모든 항목이 다시 렌더링됩니다 (내 rowHasChanged()도 호출되지 않음). 이 동작을 제거하는 유일한 방법은 장면을 비 순수하게 다시 만드는 것인데, 상태를 추가하고 필요에 따라 어떻게 든 업데이트해야하기 때문에 상당히 실망 스럽습니다.

또는 다른 대안은 무엇입니까?

Answer 1

shouldComponentUpdate에서 직접 확인하여 불필요한 재 렌더링을 방지 할 수 있습니다. 또한 얕은 비교만으로 비교 속도를 높이려면 Immutable.js과 같은 라이브러리를 사용하여 데이터를 변경하지 않는 것이 좋습니다. 구성 요소를 연결할 때

// Use immutable.is() to achieve efficient change detection. 
const ds = new ListView.DataSource({ 
    rowHasChanged: (r1, r2) => !immutable.is(r1, r2) 
}) 
// Shallow convert to a JS array, leaving immutable row data. 
this.state = { 
    dataSource: ds.cloneWithRows(countries.toArray()) 
} 

redux에서, 데이터를 필터링 mapStateToProps()를 사용하여주십시오 :

여기 ListView.DataSource 및 this article 찍은 불변 세트를 사용하는 예이다. 이 기법을 사용하고 관련 소품 만 전달하면 shouldComponentUpdate을 사용할 필요조차 없습니다.