React-typed-recyclelist NPM

React-Typed-Reclyclelist

描述

一个真正的实现了 DOM 节点回收和复用的高性能虚拟长列表组件

实现原理

安装

npm install --save react-typed-recyclelist
# or
yarn add react-typed-recyclelist

使用

import List, { StoreComponent, useStoreState } from 'react-typed-recyclelist';

Try the Demo

git clone https://github.com/weird94/react-recycle-list.git
cd react-recycle-list
yarn
yarn dev-demo

属性

属性	类型	默认	必填	描述
Header	`ComponentType<HeaderProps>`	null		列表 header 组件
Footer	`ComponentType<FooterProps>`	null		列表 footer 组件
cellData	`CellData<T>[]`		`true`	列表渲染的数据(参考 demo)
height	`number`		`true`	列表容器的高度
width	`number`		`true`	列表容器的宽度
style	`React.CSSProperties`			列表样式
className	`string`			列表 class
renderAccuary	`number`	5		列表真实渲染因子`真实渲染内容高度 = renderAccuary * 列表容器高度`
scrollComputeThrottle	`number`	100		列表触发渲染重新计算的滚动距离 (这个参数可以结合 renderAccuary 以及 item 的高度进行性能调优)
defaultScrollTop	`number`	0		列表初始滚动的位置
onScroll	`(scrollTop: number, event) => void;`			滚动时触发的事件，返回当前滚动的距离（频发触发，业务侧最好做好节流）
onEndReached	`() => void`			滚动区域还剩 `onEndReachedThreshold` 的长度时触发
onEndReachedThreshold	`number`			设置加载更多的偏移
onCellShow	`(index: number) => void`			cell 曝光事件，返回 cell 处于列表中的 index
onCellHide	`(index: number) => void`			cell 消失事件，返回 cell 处于列表中的 index
onHeaderShow	`() => void`			header 曝光事件
onHeaderHide	`() => void`			header 消失事件
onFooterShow	`() => void`			footer 曝光事件
onFooterHide	`() => void`			footer 消失事件

方法

scrollTo(scrollTop: number): void: 指定列表滚动到特定位置

示例

Cell 组件自有状态

useStoreState

import { useStoreState } from 'react-recyclelist';

const Cell = memo((props: CellProps<{ name: string }>) => {
  const [active, setActive] = useStoreState(false, 'active', props);
};

// useStoreState 是为了让 cell 组件能够实现自状态而设计
// 通过将状态寄存在 list 内部的 stateMap 上而实现

StoreComponent

import { StoreComponent } from 'react-recyclelist';

class CellComponent extends StoreComponent {
  state = {
    a: 1,
    b: 2,
  };

  render() {
    return <div>{this.state.a}</div>;
  }

  // 如果你需要使用这个生命周期，你必须调用 super.componentDidUpdate();
  componentDidUpdate() {
    super.componentDidUpdate();
    // ...
  }

  // 如果你需要使用这个生命周期，你必须调用 super.componentDidMount();
  componentDidMount() {
    super.componentDidMount();
    // ...
  }
}

注意 or 常见问题

当你实现列表的 CellComponent 时, 你必须正确的使用从 props 中传入的 style

const Cell = memo((props: CellProps<{ name: string }>) => {
  const { style, index } = props;
  return (
    <div
      style={{
        ...style,
        backgroundColor: index % 2 === 0 ? 'white' : 'yellow',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <span>{props.data.name + props.index}</span>
    </div>
  );
});

并且, 我们会保证 props 中每个属性的前后一致性, 所以你可以放心的使用 React.memo 或者 React.PureComponent