React-Typed-Reclyclelist

描述

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

实现原理

安装

``bash
npm install --save react-typed-recyclelist


or

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

Try the Demo

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

`

属性

| 属性 | 类型 | 默认 | 必填 | 描述 |
| --------------------- | ------------------------------------- | ---- | ------ | -------------------------------------------------------------------------------------------- |
| Header | ComponentType | null | | 列表 header 组件 |
| Footer | ComponentType | null | | 列表 footer 组件 |
| cellData | CellData[] | | 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: 指定列表滚动到特定位置

示例

- 示例代码
- live demo

Cell 组件自有状态

1. useStoreState

`tsx
import { useStoreState } from 'react-recyclelist';

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

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

2. StoreComponent

`tsx
import { StoreComponent } from 'react-recyclelist';

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

render() {
return

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

注意 or 常见问题

$3

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