Implementation of React virtual list

import React, { useState } from 'react';
import { VirtualList } from 'biz-web-library';
// Define the component for displaying each piece of data const ItemRender = ({ data }) => {
  let dindex = parseInt(data);
  let lineHeight = dindex % 2 ? '40px' : '80px';
  return (
    <div style={{ lineHeight, background: dindex % 2 ? '#f5f5f5' : '#fff' }}>
      <h3>#{dindex} title name</h3>
      <p>Write whatever you want, no limit on page height</p>
    </div>
  );
};
const ItemRenderMemo = React.memo(ItemRender);

// Initialize list data const getDatas = () => {
  const datas = [];
  for (let i = 0; i < 100000; i++) {
    datas.push(`${i} Item`);
  }
  return datas;
};

// Using virtual list export default () => {
  let [resources, setResources] = useState([]);
  const changeResources = () => {
    setResources(getDatas());
  };

  return (
    <div>
      <button onClick={changeResources}>click me </button>

      <div
        style={{
          height: '400px',
          overflow: 'auto',
          border: '1px solid #f5f5f5',
          padding: '0 10px',
        }}
      >
        <VirtualList
          ItemRender={ItemRenderMemo}
          resources={resources}
          estimatedItemSize={60}
        />
      </div>
    </div>
  );
};

// Overall initialization height of the circular cache list export const initPositinoCache = (
  estimatedItemSize: number = 32,
  length: number = 0,
) => {
  let index = 0,
  positions = Array(length);
  while (index < length) {
    positions[index] = {
      index,
      height: estimatedItemSize,
      top: index * estimatedItemSize,
      bottom: (index++ + 1) * estimatedItemSize,
    };
  }
  return positions;
};

// Cache the positions of all items let positions: Array<PositionType>;

class VirtualList extends React.PureComponent{
 
  constructor(props) {
    super(props);
    const { resources } = this.props;

    // Initialize cache positions = initPositinoCache(props.estimatedItemSize, resources.length);
    this.state = {
      resources,
      startOffset: 0,
      listHeight: getListHeight(positions), // bottom attribute of the last data in positions scrollRef: React.createRef(), // virtual list container ref
      items: React.createRef(), // Virtual list display area ref
      visibleCount: 10, // Number of visible areas on a page startIndex: 0, // Start index of visible area endIndex: 10, // // End index of visible area };
  }
  // TODO: Hide some other functionality. . . . .


  //Layout render() {
  const { ItemRender = ItemRenderComponent, extension } = this.props;
  const { listHeight, startOffset, resources, startIndex, endIndex, items, scrollRef } = this.state;
  let visibleData = resources.slice(startIndex, endIndex);

  return (
    <div ref={scrollRef} style={{ height: `${listHeight}px` }}>
      <ul
        ref={items}
        style={{
          transform: `translate3d(0,${startOffset}px,0)`,
        }}
      >
        {visibleData.map((data, index) => {
          return (
            <li key={data.id || data.key || index} data-index={`${startIndex + index}`}>
              <ItemRender data={data} {...extrea}/>
            </li>
          );
        })}
      </ul>
    </div>
  );
  }
} 

componentDidMount() {
  events.on(this.getEl(), 'scroll', this.onScroll, false);
  events.on(this.getEl(), 'mousewheel', NOOP, false);

  // Calculate the latest node based on rendering let visibleCount = Math.ceil(this.getEl().offsetHeight / estimatedItemSize);
  if (visibleCount === this.state.visibleCount || visibleCount === 0) {
    return;
  }
  // Update endIndex, listHeight/offset because visibleCount changed this.updateState({ visibleCount, startIndex: this.state.startIndex });
}

getEl = () => {
    let el = this.state.scrollRef || this.state.items;
    let parentEl: any = el.current?.parentElement;
    switch (window.getComputedStyle(parentEl)?.overflowY) {
      case 'auto':
      case 'scroll':
      case 'overlay':
      case 'visible':
        return parentEl;
    }
    return document.body;
};

onScroll = () => {
    requestAnimationFrame(() => {
      let { scrollTop } = this.getEl();
      let startIndex = binarySearch(positions, scrollTop);

      // Because startIndex changes, update endIndex, listHeight/offset this.updateState({ visibleCount: this.state.visibleCount, startIndex});
    });
  };

// Tool function, put into tool file export const binarySearch = (list: Array<PositionType>, value: number = 0) => {
  let start: number = 0;
  let end: number = list.length - 1;
  let tempIndex = null;
  while (start <= end) {
    let midIndex = Math.floor((start + end) / 2);
    let midValue = list[midIndex].bottom;

    // If the values ​​are equal, the found node is returned directly (because it is bottom, startIndex should be the next node)
    if (midValue === value) {
      return midIndex + 1;
    }
    // If the middle value is less than the input value, it means that the node corresponding to value is greater than start, and start moves back one position else if (midValue < value) {
      start = midIndex + 1;
    }
    // If the middle value is greater than the input value, it means that value is before the middle value, and the end node moves to mid - 1
    else if (midValue > value) {
      // tempIndex stores all the values ​​closest to value if (tempIndex === null || tempIndex > midIndex) {
        tempIndex = midIndex;
      }
      end = midIndex - 1;
    }
  }
  return tempIndex;
};

 updateState = ({ visibleCount, startIndex }) => {
    // Update data according to the newly calculated node this.setState({
      startOffset: startIndex >= 1 ? positions[startIndex - 1]?.bottom : 0,
      listHeight: getListHeight(positions),
      startIndex,
      visibleCount,
      endIndex: getEndIndex(this.state.resources, startIndex, visibleCount)
    });
  };

// The following is a tool function, placed in other files export const getListHeight = (positions: Array<PositionType>) => {
    let index = positions.length - 1;
    return index < 0 ? 0 : positions[index].bottom;
  };

export const getEndIndex = (
  resources: Array<Data>,
  startIndex: number,
  visibleCount: number,
) => {
  let resourcesLength = resources.length;
  let endIndex = startIndex + visibleCount;
  return resourcesLength > 0 ? Math.min(resourcesLength, endIndex) : endIndex;
}

 componentDidUpdate() {
  this.updateHeight();
}

  
updateHeight = () => {
  let items: HTMLCollection = this.state.items.current?.children;
  if (!items.length) return;

  // Update cache updateItemSize(positions, items);

  // Update the total height let listHeight = getListHeight(positions);

  // Update total offset let startOffset = getStartOffset(this.state.startIndex, positions);

  this.setState({
    listHeight,
    startOffset,
  });
};

// The following is a tool function, placed in other files export const updateItemSize = (
  positions: Array<PositionType>,
  items: HTMLCollection,
) => {
  Array.from(items).forEach(item => {
    let index = Number(item.getAttribute('data-index'));
    let { height } = item.getBoundingClientRect();
    let oldHeight = positions[index].height;

    //If there is a difference, update all nodes after this node let dValue = oldHeight - height;
    if (dValue) {
      positions[index].bottom = positions[index].bottom - dValue;
      positions[index].height = height;

      for (let k = index + 1; k < positions.length; k++) {
        positions[k].top = positions[k - 1].bottom;
        positions[k].bottom = positions[k].bottom - dValue;
      }
    }
  });
};

//Get the current offset export const getStartOffset = (
  startIndex: number,
  positions: Array<PositionType> = [],
) => {
  return startIndex >= 1 ? positions[startIndex - 1]?.bottom : 0;
};

export const getListHeight = (positions: Array<PositionType>) => {
  let index = positions.length - 1;
  return index < 0 ? 0 : positions[index].bottom;
};

 static getDerivedStateFromProps(
    nextProps: VirtualListProps,
    prevState: VirtualListState,
  ) {
    const { resources, estimatedItemSize } = nextProps;
    if (resources !== prevState.resources) {
      positions = initPositinoCache(estimatedItemSize, resources.length);

      // Update height let listHeight = getListHeight(positions);

      // Update total offset let startOffset = getStartOffset(prevState.startIndex, positions);

     
      let endIndex = getEndIndex(resources, prevState.startIndex, prevState.visibleCount);
     
      return {
        resources,
        listHeight,
        startOffset,
        endIndex,
      };
    }
    return null;
  }