recyclerlistview

• Flatlist 프레임 드랍 1500 개 이상의 데이터 셋일 때 발생
  • 300개 이상 부터 확연한 차이가 있긴 하다. (그렇다고 못 쓸 정도는 아님)

함수형 참고 자료
<https://github.com/Flipkart/recyclerlistview/issues?q=functional>

scrollview_vs_flatlist_vs_recycler_list_view 성능비교
<https://gist.github.com/vemarav/d3fbd9399bc1c3314a40ed87f8ba6877>

install

npm install --save recyclerlistview

필수 및 주요 props

전체 props link

### 필수 props
- layoutProvider - height, width 레이아웃 처리
- dataProvider   - 각 엘리먼트 데이터 처리
- rowRenderer    -  RecylerListView 내에서 render 되는 컴포넌트되는 요소 type, data, index를 반환

### 주요 props
- onEndReached  
- renderAheadOffset 
- renderFooter

RecyclerListView sample 예시

**layoutProvider 예시**

```tsx
new LayoutProvider(
      (i) => {
        if (i === 0) {
          return "HEADER";
        } else {
          return "ITEM";
        }
      },
      (type, dim, index) => { // type 위 함수에서 반환 받음, dim 객체 width, height 를 가짐
        switch (type) {
          case "HEADER":
            dim.width = width; // 여기서 width 값은 useWindowDimensions 에서 가지고 온 핸드폰 전체의 width
            dim.height = 100;
            break;
          case "ITEM":
            dim.width = width;
            dim.height = 80;
            break;
          default:
            dim.width = width;
            dim.height = 80;
        }
      },
    ),

dataProvider 예시

new DataProvider((r1, r2) => {
        return r1 !== r2;
      }).cloneWithRows(data as any[])

rowRenderer 예시

// 예시
type DataType = {
	id: number;
	name: string;
	phone: number;
	...
}
const rowRenderer = (type: string | number, data: DataType, index: number, extendedState?: object) => {
  return <RenderItem type={type} data={data}/>
};

RecyclerListView 예시

<RecyclerListView
      layoutProvider={layoutProvider}
      dataProvider={dataProvider}
      rowRenderer={rowRenderer}
    />