@ray-js/recycle-view v0.0.5

English | 简体中文

@ray-js/recycle-view

Ray recycle list

Performance testing

• Advantage: create 270 element points
• operation: swiftly slide up and down, view performance data
• The performance of the aircraft:
  • Android: mi 6 (low end model) No cartoon problem
  • iOS: iPhone 6s (lower end device) No cartoon issue
• Performance data:
  • FPS: 38-60 (average value is 40+)
  • MT: 1-40 (mean value 10+)

Installation

$ npm install @ray-js/recycle-view
# or
$ yarn add @ray-js/recycle-view

Usage

import React, { useState, useMemo } from 'react';
import { View, Text, Button, showLoading, hideLoading } from '@ray-js/ray';
import RecycleView, { transformRow1ToRowN } from '@ray-js/recycle-view';
import styles from './index.module.less';
import Strings from '../i18n';

let index = 0;
// mock data
const mockData: { height: number; [key: string]: any }[] = [];
for (let i = 1; i < 21; i++) {
  mockData.push({
    timeC: Math.floor(i / 5),
    height: 100,
    text: `row ${index++}`,
  });
}

const DemoBlock = ({ title, children }) => (
  <View className={styles.demoBlock}>
    <View className={styles.demoBlockTitle}>
      <Text className={styles.demoBlockTitleText}>{title}</Text>
    </View>
    {children}
  </View>
);

enum Type {
  base = 'base',
  advanced = 'advanced',
}

export default function Home() {
  const [tab, setTab] = useState(Type.base);
  const [data, setData] = useState(mockData);
  const rowNum = 3;
  const rowGroupOffsetTopHeight = 30;

  // basic tab data
  const realBaseData = useMemo(() => {
    return data;
  }, [data.length]);

  // advance tab data
  const realAdvanceData = useMemo(() => {
    const groupKey = 'timeC';
    return transformRow1ToRowN(data, groupKey, rowNum, rowGroupOffsetTopHeight);
  }, [data.length, rowNum, rowGroupOffsetTopHeight]);

  const handleScrollToLower = e => {
    const len = Math.floor(data.length / 5);
    if (len > 50) {
      return;
    }
    showLoading({
      title: '',
      mask: true,
    });
    setTimeout(() => {
      const len = Math.floor(data.length / 5);
      const random = Math.floor(Math.random() * 10) + 10;
      for (let i = 0; i < random; i++) {
        data.push({
          height: 100,
          timeC: Math.floor(i / 5) + len,
          text: `row ${index++}`,
        });
      }
      setData([...data]);
      hideLoading();
    }, 1000);
  };
  return (
    <View className={styles.app}>
      <View className={styles.buttonWrapper}>
        <Button type={tab === Type.base ? 'primary' : 'default'} onClick={() => setTab(Type.base)}>
          {Strings.getLang('base')}
        </Button>
        <Button
          type={tab === Type.base ? 'default' : 'primary'}
          onClick={() => setTab(Type.advanced)}
        >
          {Strings.getLang('advanced')}
        </Button>
      </View>
      {tab === Type.base && (
        <DemoBlock title={Strings.getLang('base')}>
          <RecycleView
            overScanCount={20}
            className={styles.recycleView}
            data={realBaseData}
            bottomHeight={150}
            renderBottom={() => {
              return (
                <View style={{ height: '150px', backgroundColor: 'yellow' }}>
                  {Strings.getLang('footer')}
                </View>
              );
            }}
            renderItem={item => {
              return (
                <View
                  key={item.text}
                  style={{
                    width: '100%',
                    height: `${item.height}px`,
                    textAlign: 'center',
                    background: '#eee',
                    border: '1px solid #ccc',
                  }}
                >{`${item.text}`}</View>
              );
            }}
            onScrollToLower={handleScrollToLower}
          />
        </DemoBlock>
      )}
      {tab === Type.advanced && (
        <DemoBlock title={Strings.getLang('advanced')}>
          <RecycleView
            overScanCount={20}
            className={styles.recycleView}
            data={realAdvanceData}
            bottomHeight={150}
            renderBottom={() => {
              return (
                <View style={{ height: '150px', backgroundColor: 'yellow' }}>
                  {Strings.getLang('footer')}
                </View>
              );
            }}
            renderItem={item => {
              const { groupKey, data } = item;
              return (
                <View
                  key={groupKey}
                  style={{
                    backgroundColor: 'white',
                    fontWeight: 'bold',
                    color: 'red',
                    height: '100%',
                    textAlign: 'center',
                  }}
                >
                  <View
                    style={{
                      color: 'blue',
                      fontSize: '18px',
                      fontWeight: 'bold',
                      background: '#999',
                    }}
                  >
                    key: {groupKey}
                  </View>
                  <View
                    style={{
                      display: 'flex',
                      flexWrap: 'wrap',
                      textAlign: 'center',
                    }}
                  >
                    {data.map(innerItem => {
                      return (
                        <View
                          key={innerItem.text}
                          style={{
                            width: '33%',
                            height: `${innerItem.height}px`,
                            textAlign: 'center',
                            background: '#eee',
                            border: '1px solid #ccc',
                          }}
                        >{`${innerItem.text}`}</View>
                      );
                    })}
                  </View>
                </View>
              );
            }}
            onScrollToLower={handleScrollToLower}
          />
        </DemoBlock>
      )}
    </View>
  );
}