2017-01-11 1 views
7

나는 다음과 같은 rowHasChanged와, (WHATSAPP/페이스 북 메신저와 유사) 채팅 세션의 목록을 표시하는 ListView 있습니다ListView 정렬 성능을 처리하는 방법?

rowHasChanged: (r1, r2) => r1.id !== r2.id 

내가 업데이트되지 않는 항목을 다시 렌더링 점점 것으로 나타났습니다도 shouldComponentUpdate을 사용하면

일부 흔적을 발견 한 후에 데이터 소스를 복제하기 전에 항목을 다르게 정렬하기 때문에 (새 메시지가 항목의 상단으로 이동하게 함) rowHasChanged은 다른 행을 비교하고 있습니다. 그렇게하는 것이 당연합니다.

그러나 성능면에서 정렬을 지원하는 솔루션은 없습니까? WPF에서 CollectionViewSource은 동일한 문제 (필터링 및 기타 지원)로 인해 데이터 외에도 something to sort by을 받았습니다.

누구나 이러한 중복 렌더링을 제거하는 방법을 알고 있습니까?

+0

'ListViewDataSource'는 불변의 데이터를 사용하므로'ListView'를 사용하는 것이 가능하지 않을 것이라고 생각합니다. 그러나'removeClippedSubviews'가 활성화되어 있다면 매우 많은 행을 렌더링해야하는 것처럼 보이지 않습니다. 너 그거 해봤 니? –

+0

@GarrettMcCullough 문제는 불변의 데이터 나 너무 많은 행 렌더링 문제가 아닙니다. 한 행의 위치가 바뀌면 다른 모든 행이 내 데이터에서 자신의 위치를 ​​변경하게되어 ListView가 서로 다른 행을 서로 비교하기 때문에 모든 행을 변경된 행으로 간주하게됩니다. –

+0

Moti, 제 의견은 당신이 불변의 데이터 객체를 사용하고 있기 때문에 새로운 레코드를 큐의 앞쪽으로 밀어 넣는 것은 데이터 구조를 변경하기 때문에 모든 행이 다시 렌더링되어야한다는 것을 의미합니다. 데이터 구조가 이제는 다릅니다. 그러나'removeClippedSubviews'가 켜져 있다면 보이는 행만 다시 그리기 때문에 모든 행을 다시 랜더링하는 것은 중요하지 않습니다. 성능에 문제가 있어서는 안됩니다. 일부 ListView 대안을 볼 수도 있습니다. –

답변

0

이런 데이터 소스를 사용하고 있습니까?

this.setState({ 
 
    dataSource: this.ds.cloneWithRows(rowData) 
 
});

시도는 다음과 같이 사용 :이 원 있도록

this.setState(state => ({ 
 
    dataSource: this.state.dataSource.cloneWithRows(rowData) 
 
}))

을 처음 sutiation에서는, 데이터 소스와 새로운 값을 설정하고 rowHasChanged를 사용하지 않고 새로운 dataSource처럼 사용합니다.

+0

아니요, 상태에서 일관되게 데이터 소스를 사용하고있었습니다. 문제는 rowHasChanged에 관한 것이 아니라, 행 비교가 전적으로 인덱스 기반이기 때문에 불필요한 재 렌더링을 유발하지 않고 ListView를 정렬 할 수 없다는 사실입니다. –