a high perfomance list based react tech stack
npm install react-typed-recyclelist一个真正的实现了 DOM 节点回收和复用的高性能虚拟长列表组件
``bash`
npm install --save react-typed-recyclelistor
yarn add react-typed-recyclelist
`ts`
import List, { StoreComponent, useStoreState } from 'react-typed-recyclelist';
`bash
git clone https://github.com/weird94/react-recycle-list.git
cd react-recycle-list
yarn
yarn dev-demo
`
| 属性 | 类型 | 默认 | 必填 | 描述 |
| --------------------- | ------------------------------------- | ---- | ------ | -------------------------------------------------------------------------------------------- |
| Header | ComponentType | null | | 列表 header 组件 |ComponentType
| Footer | | null | | 列表 footer 组件 |CellData
| cellData | | | true | 列表渲染的数据(参考 demo) |number
| height | | | true | 列表容器的高度 |number
| width | | | true | 列表容器的宽度 |React.CSSProperties
| style | | | | 列表样式 |string
| className | | | | 列表 class |number
| renderAccuary | | 5 | | 列表真实渲染因子真实渲染内容高度 = renderAccuary * 列表容器高度 |number
| scrollComputeThrottle | | 100 | | 列表触发渲染重新计算的滚动距离 (这个参数可以结合 renderAccuary 以及 item 的高度进行性能调优) |number
| defaultScrollTop | | 0 | | 列表初始滚动的位置 |(scrollTop: number, event) => void;
| onScroll | | | | 滚动时触发的事件,返回当前滚动的距离 (频发触发,业务侧最好做好节流) |() => void
| onEndReached | | | | 滚动区域还剩 onEndReachedThreshold 的长度时触发 |number
| onEndReachedThreshold | | | | 设置加载更多的偏移 |(index: number) => void
| onCellShow | | | | cell 曝光事件,返回 cell 处于列表中的 index |(index: number) => void
| onCellHide | | | | cell 消失事件,返回 cell 处于列表中的 index |() => void
| onHeaderShow | | | | header 曝光事件 |() => void
| onHeaderHide | | | | header 消失事件 |() => void
| onFooterShow | | | | footer 曝光事件 |() => void
| onFooterHide | | | | footer 消失事件 |
scrollTo(scrollTop: number): void: 指定列表滚动到特定位置
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.componentDidUpdate();
componentDidUpdate() {
super.componentDidUpdate();
// ...
}
// 如果你需要使用这个生命周期,你必须调用 super.componentDidMount();
componentDidMount() {
super.componentDidMount();
// ...
}
}
`
`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}
并且, 我们会保证 props 中每个属性的前后一致性, 所以你可以放心的使用
React.memo 或者 React.PureComponent#### 我自己在真实的使用过程中出现了滑动过快导致短暂白屏的情况,我应该怎么优化呢 ?
我们开放了一些参数用于你在实际使用中自己进行部分的调优
- renderAccuary: 列表真实渲染因子
真实渲染内容高度 = renderAccuary * 列表容器高度` 默认为 5所以,如果你出现了上述情况,不妨试试将这两个参数调大一些。
我们为每个 cell 实现了状态寄存,可以参考
如果顺序会发生改变的情况下,
1. 我们提供了 sortKey props 来标示列表顺序的版本,以此驱动列表重新渲染并且清空回收池
2. 我们允许你为数据打上唯一的 uniqueKey,这样来保证 store 和数据的一一对应