mini react-window(一) 实现固定高度虚拟滚动

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import FixedSizeList from './fixed-size-list'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <FixedSizeList />
);

// src/fixed-size-list
// 固定高度列表
import {FixedSizeList} from 'react-window'
import './fixed.css'

// 渲染的每一行的 item 项
function Row({index, style}) {
  return <div className={index % 2 ? 'odd': 'even'} style={style}>
    Row {index}
  </div>
}

function App() {
  // 可视区的宽高 200，每一项高度 50，列表总数 1000
  return <FixedSizeList className='list' height={200} width={200} itemSize={50} itemCount={1000}>
    {Row}
  </FixedSizeList>
}
export default App

// src/fixed.css
.list {
  border: 1px solid gray;
}
.odd, .even {
  display: flex;
  align-items: center;
  justify-content: center;
}

.odd {
  background-color: pink;
}

.even {
  background-color: antiquewhite;
}

// src/react-window/index.js

export {default as FixedSizeList} from './FixedSizeList'

// src/react-window/FixedSizeList.js

import createListComponet from './createListComponent'
// 传入组件的配置参数，返回一个组件
const FixedSizeList = createLstComponent({})

export default FixedSizeList

// src/react-window/createListComponent.js

import React from 'react'

function createListComponet({}) {
  return class extends React.Component {
    render() {
      // 这个类组件是返回的页面具体使用的那个组件，所以可以直接通过属性获取值
      const { width, height, itemCount, children: ComponentType } = this.props;
      // 我们根据上面的 dom 结构可以写出如下布局
      const containerStyle = {
        position: "relative",
        width,
        height,
        overflow: "auto",
        willChange: "transform",
      };
      const contentStyle = {
        width: '100%',
        height: ??? // 这里高度待定
      }
      const items = []
      // 如果有列表长度，进行每一项的处理，样式待定
      if (itemCount > 0) {
        // 这里我们现渲染所有的数据，稍后做截取处理
        for(let i = 0; i < itemCount; i++) {
          items.push(<ComponentType index={i} style={this.getItemStyle(i)} key={i} />)
        }
      }
      return <div style={containerStyle}>
        <div style={contentStyle}>{items}</div>
      </div>
    }
    
    // 每一项的样式
    getItemStyle =（i) => {
      const style = {
        position: "absolute",
        width: "100%",
        height: ???,
        top: ???,
      };

      return style;
    }
  }
}

const FixedSizeList = createListComponent({
  getEstimatedTotalSize: ({ itemSize, itemCount }) => itemSize * itemCount, // 预计内容高度，固定高度直接相乘 就好
  getItemSize: ({ itemSize }) => itemSize, // 固定高度直接使用
  getItemOffset: ({ itemSize }, index) => itemSize * index // 因为元素是定位的，同时高度固定，所以 top 值可如此计算
});

function createListComponent({
  getEstimatedTotalSize, // 估算内容高度
  getItemSize, // 每一项的高度
  getItemOffset, // 每一项的 top 值
}) {
....

contentStyle.height = getEstimatedTotalSize(this.props)

itemStyle.height = getItemSize(this.props)
itemStyle.top = getItemOffset(this.props, i)

render() {
  ...
  if (itemCount > 0) {
    // 需要计算得出截取的索引
    const [startIndex, endIndex] = this.getRangeToRender()
    for (let i = startIndex; i <= endIndex; i++) {
      items.push(
        <ComponentType index={i} style={this.getItemStyle(i)} key={i} />
      );
    }
  }
  ...
}
state = {
  scrollOffset: 0, // 向上卷去的高度，就是我们说的滚动距离，scrollTop，默认 0
}
getRangeToRender = （） => {
  const {scrollOffset} = this.state
  const {itemCount} = this.props
  // 索引的计算处理同样因为场景不同外部传入
  
  // 根据卷去高度计算开始索引
  const startIndex = getStartIndexForOffset(this.props, scrollOffset)
  // 根据开始索引计算 结束索引
  const endIndex = getEndIndexForOffset(this.props, startIndex)
  return [startIndex, endIndex]
}

const FixedSizeList = createListComponent({
  ...
  // 开始索引我们需要向下取整，即使 item 滚动到一半，我们也要渲染
  getStartIndexForOffset: ({ itemSize }, offset) =>
    Math.floor(offset / itemSize),
  // 结束索引的计算为 开始索引 + 中间能展示的索引个数
  getEndIndexForOffset: ({ height, itemSize }, startIndex) =>
    startIndex + Math.ceil(height / itemSize) - 1 // 结束索引闭区间，所以 -1 (即算到了第八个，但是第八个其实是不展示的)
});

// 定义需要预渲染的个数
static defaultProps = {
  overscanCount: 2, // 性能好可以多设置
}

getRangeToRender = () => {
  const {scrollOffset} = this.state
  const {overscanCount, itemCount} = this.props
  const startIndex = getStartIndexForOffset(this.props, scrollOffset)
  const endIndex = getEndIndexForOffset(this.props, startIndex)
  // 向下滚动要取最大值，向上滚动时要取最小值，需要跟索引临界值对比
  return [Math.max(0, startIndex - overscanCount), Math.min(itemCount - 1, endIndex + overscanCount)]
}